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

如果你想让它们内联，你需要通过这样做为标签提供内联类：: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 2

你可以尝试

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)

Answer 3

使用简单表单和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

Answer 4

上面的答案可能没有用，因为我没有使用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 5

一个简单的解决方案：

将一个类添加到项目包装器。这个班级可以是你选择的任何一个。我在下面的例子中使用'inline'：

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

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

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

以下是一个例子：

Answer 6

对于那些使用简单形式的zurb基础的人来说，chekbox来到这里：

苗条的观点：

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

SCSS：

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