simple_form_for rails 单选按钮内联

Question

我正在尝试让我的按钮显示内联并且还具有默认值，因为它不能为空。我正在使用 plataformatex/simple_form 和 bootstrap。

= 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>

请注意，默认值仍然无效。

Answer 1

你可以试试

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

不太确定您将哪个 gem 用于简单形式，但这是您可以尝试的源或参考

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

Answer 2

如果您希望它们内联，则需要通过执行以下操作为标签提供内联类：: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

编辑：我刚刚意识到我的答案更具体到 simple_form + bootstrap，因为 bootstrap 在给标签的内联类时已经定义了样式。不过，您应该可以使用我的示例，在创建自定义 css 时需要做更多工作。

Answer 3

上面的答案可能不起作用，因为我没有使用 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。 ;)

Answer 4

在 Bootstrap 3 中使用 Simple Form，您可以使用 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

Answer 5

一个简单的解决方案：

向项目包装器添加一个类。这个类可以是你选择的任何东西。我在下面的示例中使用“内联”：

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

然后定义一些仅适用于单选按钮组的 CSS（并且仅适用于实际的单选按钮，而不是项目标签）：

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

下面是一个例子：

Answer 6

只为那些使用简单表单复选框的人来这里：

超薄视图：

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

scss:

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