web-dev-qa-db-ja.com

simple_form_for Railsラジオボタンインライン

ボタンをインラインで表示し、空白にすることはできないため、デフォルト値を設定しようとしています。私はplataformatex/simple_formとブートストラップを使用しています。

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true

これをレンダリングしています：

<span>
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>    
</span>
<span>
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

style:は適切に機能していませんが、何が機能するかわかりません。

追加した別の提案に従って

.radio_buttons { display:inline; }

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true

そして得た：

<span class="radio_buttons">
  <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" />
  <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>
</span>
<span class="radio_buttons">
  <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" />
  <label class="collection_radio_buttons" for="workout_is_private_false">Public</label>
</span>

デフォルト値がまだ機能していないことに注意してください。

cssruby-on-railsformstwitter-bootstrapsimple-form
22
trev9065

インラインにする場合は、次のようにしてラベルにインラインクラスを与える必要があります：:item_wrapper_class => 'inline'

コードを使用した例を次に示します。

= f.input :is_private, 
          :collection => [[true, 'Private'], [false, 'Public']], 
          :label_method => :last, 
          :value_method => :first,
          :as => :radio_buttons, 
          :item_wrapper_class => 'inline',
          :checked => true

編集： bootstrapには、ラベルのインラインクラスを指定するときにすでにスタイルが定義されているため、私の答えはsimple_form +ブートストラップにより具体的であることがわかりました。ただし、私の例を使用するには、カスタムCSSを作成するためにもう少し作業が必要になります。

56
flynfish

あなたが試すことができます

f.collection_radio_buttons :options, [[true, 'Yes'] ,[false, 'No']], :first, :last ,:style =>"display:inline", :default => true

あなたがシンプルなフォームにどの宝石を使用するかはそれほどわかりませんが、これはあなたが試すことができるソースまたはリファレンスです

collection_radio_buttons(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block)
2
Arpit Vaishnav

Bootstrap 3でシンプルなフォームを使用すると、radioクラスをitem_wrapper_classおよびitem_wrapper_tagオプション。

= f.collection_radio_buttons :sort, [[foo,bar],[foo,bar],
  :first, :last,
  item_wrapper_class: :radio,
  item_wrapper_tag: :div
2
Josh

上記の回答は、Bootstrapを使用していないため機能しない場合があります。しかし、他の方法があります。ボタンの周りにclass = "radio-buttons"を付けてdivをたたき、手動でラベルを付けました。次に、これをスタイルシート（SASS）に追加しました。

.radio-buttons {
  margin: .5em 0;
  span input {
    float: left;
    margin-right: .25em;
    margin-top: -.25em;
  }
  #this grabs the MAIN label only for my radio buttons 
  #since the data type for the table column is string--yours may be different
  label.string { 
    margin-bottom: .5em !important;
  }

  clear: both;
}

.form-block {
  clear: both;
  margin-top: .5em;
}

 .radio-buttons span {
  clear: both;
  display:block;
 }

これにより、すべてのフレームワークでラジオボタンがインラインになりますが、これはZurb Foundationに最適に見えるように調整されています。 ;）

1
Jenny Lang

簡単な解決策：

アイテムラッパーにクラスを追加。このクラスは、任意のクラスにすることができます。以下の例では「インライン」を使用しています。

form.input :my_field, as: 'radio_buttons' wrapper_html: {class: 'inline'}

次に、CSSを定義しますこれは、ラジオボタングループにのみ適用されます（実際のラジオボタンのみで、アイテムラベルには適用されません）。

input.radio_buttons.inline label.radio{
  display: inline-block;
}

これがもたらす結果の例を次に示します。

The above yields this result

0
Ben

シンプルなフォームのチェックボックスでzurbファウンデーションを使用する人のためにここに来ました：

スリムビュー：

= f.input :company_stages, as: :check_boxes, required: true

scss：

// simple-form checbox
.checkbox {
    margin-right: 20px;
    display: inline-block;
}
0
yanyingwang