[英]Rails and Formtastic: how to display the label of the checkbox to the right?
I'm using Twitter Bootstrap. 我正在使用Twitter Bootstrap。
I have the following code... 我有以下代码......
<div class="row">
<div class="span5">
<%= f.input :is_authorized_to_leave_with_child %>
<%= f.input :is_emergency_contact %>
</div>
<div class="span5">
</div>
</div>
The problem is, the label is displayed on the left and the checkbox to the right. 问题是,标签显示在左侧,复选框显示在右侧。 Just the opposite on how Twitter Bootstrap sample form checkbox section look like, check it out: http://twitter.github.com/bootstrap/base-css.html#forms
与Twitter Bootstrap样本表单复选框部分的外观完全相反,请查看: http : //twitter.github.com/bootstrap/base-css.html#forms
The checkbox is in the right and the label is on the right. 复选框位于右侧,标签位于右侧。 How can I display it like that?
我怎么能这样显示呢?
As of formtastic 2.x , you could re-define the behavior of existing inputs using the app/inputs/#{ input_name.underscore }_input.rb
file. 从formtastic 2.x开始 ,您可以使用
app/inputs/#{ input_name.underscore }_input.rb
文件重新定义现有输入的行为。
The default behavior of BooleanInput
is: call to_html
method, which calls label_with_nested_checkbox
, which calls label_text_with_embedded_checkbox
, which creates the following layout: 的默认行为
BooleanInput
是:调用to_html
方法,它调用label_with_nested_checkbox
,它调用label_text_with_embedded_checkbox
,它创建了以下布局:
<label>
<input />
</label>
and uses this logic: 并使用此逻辑:
check_box_html << "" << label_text
So, everything you need to do is just create a app/inputs/boolean_input.rb
file with this code: 因此,您需要做的就是使用以下代码创建
app/inputs/boolean_input.rb
文件:
class BooleanInput < Formtastic::Inputs::BooleanInput
def label_text_with_embedded_checkbox
label_text << "" << check_box_html
end
end
And change an app/assets/formtastic-ie7.css
file to make that input look a bit more pretty: 并更改
app/assets/formtastic-ie7.css
文件以使输入看起来更漂亮:
.formtastic .boolean label input {
left:-4px;
}
Here's how it looks like: 这是它的样子:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.