simple_form_for rails单选按钮内嵌
我想让我的按钮显示内联,也有一个默认值,因为它不能为空。我正在使用plataformatex/simple_form和bootstrap。simple_form_for rails单选按钮内嵌
= 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>
只是另一个需要注意的是默认值仍然是行不通的。
,您需要通过以下步骤为标签提供内联类::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 +引导,因为引导已经给标签的内嵌类时定义的样式。您应该可以使用我的示例,但只需在创建自定义CSS时进行更多的工作即可。
您可以尝试
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)
上述答案可能不起作用,因为我没有使用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基金会。 ;)
使用带引导程序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
一个简单的办法:
添加类的项目包装。这门课可以是你选择的任何东西。我使用“内联”在下面的例子:
form.input :my_field, as: 'radio_buttons' wrapper_html: {class: 'inline'}
然后定义一些CSS只适用于单选按钮组(只有实际的单选按钮,而不是在项目标签):
input.radio_buttons.inline label.radio{
display: inline-block;
}
下面是这个收益率的一个例子:
也许它已被删除,但使用'as:'radio''给了我一个'没有发现无线电输入错误的输入。 – 2015-10-02 18:55:38
啊,我相信这是“radio_buttons”。更新我的答案,让我们知道如果这有效。对困惑感到抱歉。 – Ben 2015-10-04 01:02:21
只是使用zurb基础用简单形式的chekbox谁的人来到这里:
苗条观点:
= f.input :company_stages, as: :check_boxes, required: true
SCSS:
// simple-form checbox
.checkbox {
margin-right: 20px;
display: inline-block;
}
@ trev9065我用你的代码在我的答案中添加了一个例子,你可以试试看看它是否有效? – flynfish 2012-04-03 16:57:57
谢谢你的工作!你知道如何让他们中的一个默认选中吗? – trev9065 2012-04-03 17:08:21
是的,我更新了答案。添加':checked => true' – flynfish 2012-04-03 17:11:23