CSS simple_form_for rails 单选按钮内联

simple_form_for rails radio button inline

提问by trev9065

I am trying to get my buttons to display inline and also have a default value because it can't be blank. I am usingplataformatex/simple_form and bootstrap.

我试图让我的按钮显示内联并且还有一个默认值，因为它不能为空。我正在使用plataformatex/simple_form 和引导程序。

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

It is rendering this:

它正在渲染这个：

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

It is clear that the style:is not working properly but I am not sure what will work.

很明显，style:它不能正常工作，但我不确定什么会起作用。

Following another suggestion I added

根据我添加的另一个建议

.radio_buttons { display:inline; }

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

And got:

并得到：

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

Just another note that the default value still is not working.

另一个注意的是默认值仍然不起作用。

回答by flynfish

If you want them inline, you need to give the labels the inline class by doing: :item_wrapper_class => 'inline'

如果您希望它们内联，则需要通过执行以下操作为标签提供内联类： :item_wrapper_class => 'inline'

Here is an example using your code:

这是使用您的代码的示例：

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

EDIT:I just realized that my answer was more specific to simple_form + bootstrap, since bootstrap already has styles defined when giving the label's the inline class. You should be able to use my example though, it will just take some more work on your end in creating your custom css.

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

回答by Arpit Vaishnav

You can try

你可以试试

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

Not so sure which gem you use for simple form , but This is the source or a reference on which you can try

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

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

回答by Josh

Using Simple Form with Bootstrap 3 you can use the radioclass along with the item_wrapper_classand item_wrapper_tagoptions.

在 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

回答by Jenny Lang

The above answer might have not worked because I'm not using Bootstrap. But there are other ways. I slapped a div with class="radio-buttons" around the buttons and label manually. Then I added this to my style sheet (SASS):

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

This will make the radio buttons inline on ALL frameworks, though this is tweaked to look the best for Zurb Foundation. ;)

这将使所有框架上的单选按钮内联，尽管这经过调整以使其看起来最适合 Zurb Foundation。;)

回答by Ben

A simple solution:

一个简单的解决方案：

Add a class to the item wrapper. This class can be whatever you choose. I'm using 'inline' in the example below:

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

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

Then define some CSSwhich only applies to radio button groups (and only the actual radio buttons, not the item label):

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

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

Here's an example of what this yields:

下面是一个例子：

回答by yanyingwang

Just for someone who using zurb foundation with simple form's chekbox came here:

仅适用于使用带有简单表格 chekbox 的 zurb 基础的人来到这里：

slim view:

苗条的看法：

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

scss:

scss：

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