繁体   English   中英

Rails和Formtastic:如何在右侧显示复选框的标签?

[英]Rails and Formtastic: how to display the label of the checkbox to the right?

我正在使用Twitter Bootstrap。

我有以下代码......

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

问题是,标签显示在左侧,复选框显示在右侧。 与Twitter Bootstrap样本表单复选框部分的外观完全相反,请查看: http//twitter.github.com/bootstrap/base-css.html#forms

复选框位于右侧,标签位于右侧。 我怎么能这样显示呢?

formtastic 2.x开始 ,您可以使用app/inputs/#{ input_name.underscore }_input.rb文件重新定义现有输入的行为。

的默认行为BooleanInput是:调用to_html方法,它调用label_with_nested_checkbox ,它调用label_text_with_embedded_checkbox ,它创建了以下布局:

<label>
  <input />
</label>

并使用此逻辑:

check_box_html << "" << label_text

因此,您需要做的就是使用以下代码创建app/inputs/boolean_input.rb文件:

class BooleanInput < Formtastic::Inputs::BooleanInput
def label_text_with_embedded_checkbox
        label_text << "" << check_box_html
    end
end

并更改app/assets/formtastic-ie7.css文件以使输入看起来更漂亮:

.formtastic .boolean label input {
    left:-4px;
}

这是它的样子:

在此输入图像描述

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM