web-dev-qa-db-ja.com

Railsフォームの同じ行にチェックボックスとラベルを保持する方法？

Railsフォームを含むビューのチェックボックスと同じ行にチェックボックスのラベルを保持するにはどうすればよいですか？

現在、ラベルは次の行にあります。

<div class="span6 offset3">
<%= form_for(@user) do |f| %>
<%= render 'shared/error_messages', object: f.object %>

  <%= f.label :name %>
  <%= f.text_field :name %>

  <br>
  <%= f.check_box :terms_of_service %>
  <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe %>
  <br><br>

  <%= f.submit "Create my account", :class => "btn btn-large btn-primary" %>
<% end %>

ありがとう、アレクサンドラ

ruby-on-railsformstwitter-bootstrapruby-on-rails-3
44
AndraD

Bootstrapを使用しているように見えるため、ビューコードを調整して、Bootstrap docs： https：// getbootstrap。 com/docs/4.3/components/forms /＃horizo​​ntal-form

22
David Underwood

bootstrap wiki によると、

<label class="checkbox">
  <input type="checkbox"> Check me out
</label>

これはRuby on Railsは

<%= f.label :terms_of_service do %>
  <%= f.check_box :terms_of_service %>
  I agree to the <%= link_to 'Terms of Service', policies_path %>.
<% end %>
58
Benoît Legat
 <br>
  <%= f.check_box :terms_of_service, :style => "float:left;" %>
  <%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe, :style => "float:left;" %>
  <br>
5
jainvikram444

答えに対するコメントは正しいですが、要素の順序について理解するためのニュアンスを前提としています。

正解は次のとおりです。

<%= f.check_box :terms_of_service %>
<%= f.label :terms_of_service, "I agree to the #{link_to 'Terms of Service', policies_path}.".html_safe
                             , {class: "checkbox inline"} %>

次の2つが必要です。

  1. ラベル要素のクラス
  2. チェックボックス要素は、ラベル要素の前になければなりません。

これが動作しているのがわかると、これは明らかですが、form_forの他のすべてのサンプルには常にラベルの後に入力があり、チェックボックスのためにそれを変更する必要があります。

5
Patrck
  <div class="form-inline">
    <%= f.check_box :subscribed, class: 'form-control' %>
    <%= f.label :subscribed, "Subscribe" %>
  </div>
2
Still Learning

labelを使用して国際化を維持するには、tを使用できます。

<%= f.label :my_field do %>
  <%= f.check_box :my_field %> <%= t 'activerecord.attributes.my_model.my_field' %>
<% end %>
2
Sidhannowe

先日、Twitterブートストラップを使用して同様の問題が発生しましたが、simple_form gemも使用しています。私はCSSでその詳細を修正する必要がありました、ここに私のコードがあります：

<%=f.input :status, :label => "Disponible?",  :as => :boolean, :label_html => { :class => "pull-left dispo" }%>

css：

.dispo{
    margin-right:10%;
}
pull-left{
    float:left;
}
2
Rodrigo Zurek

基本的なRailsタグの場合：

<%= label_tag('retry-all') do %>
  Retry All
  <= check_box_tag("retry-all",false) %>
<% end %>
1
Blair Anderson

ラベル内にチェックボックスをラップします。

  <%= f.label :terms_of_service do %>
    <%= f.check_box :terms_of_service %>
    I agree to the <%= link_to 'Terms of Service', policies_path %>
  <% end %>

入力フィールドがラベルでラップされている場合、実際にはラベルのfor属性は必要ありません。ラベルは、クリック時にチェックボックスをアクティブにします。さらに簡単に：

  <label>
    <%= f.check_box :terms_of_service %>
    I agree to the <%= link_to 'Terms of Service', policies_path %>
  </label>

一般的にRailsの場合、これを回避する方法があります（human_attribute_nameはi18nで動作します）。

<label>
  <%= f.check_box :terms_of_service %>
  <%= User.human_attribute_name(:terms_of_service) %>
</label>
1
JSpang

Bootstrap 4、HAMLで

  .form-check
    =f.label :decision_maker, class: 'form-check-label' do
      =f.check_box :decision_maker, class: 'form-check-input'
      Decision Maker

または

  .form-group
    =f.check_box :decision_maker
    =f.label :decision_maker

https://getbootstrap.com/docs/4.3/components/forms/#default-stacked

<div class="form-check"> <label class="form-check-label"> <input class="form-check-input" type="checkbox" value=""> Option one is this and that&mdash;be sure to include why it's great </label> </div>

最初の方法はより正しい方法ですが、2番目の方法は実質的に同一で乾燥しているように見えます。

0
Chloe

On Rails 5.2、Ruby 2.4 and bootstrap 4.1.1：

<%= form.check_box :terms_of_service, label: "your custom label...."%>

インラインチェックボックスを指定せずに私のために働いた。

0
tomb

bootstrapを使用しますか？簡単な方法は、f.submitに:class => "span1"を追加することです。私はそれが働いたと確信しています！

0
duykhoa
<div class="row"> 
  <div class="col-sm-1">
    <%= f.label :paid? %>
  </div>
  <div class="col-sm-1">
    <%= f.check_box :paid, value: 'false'  %>
  </div>
</div>
0
Jim