【问题标题】:Simple_form: how to change input's wrapper's class?(not the wrapper_html effect on)Simple_form:如何更改输入的包装类?(不是 wrapper_html 效果)
【发布时间】:2014-09-09 09:08:44
【问题描述】:

我在使用 simple_form 和 Bootstrap 3 时遇到问题。关于输入的包装标签。在下面显示代码:

查看代码(带haml)

= simple_form_for @refer_email_form, url: create_refer_message_path, html: { class: "form-horizontal" } do |f|
  = f.input :to, label_html: { class: "col-sm-2" }
  = f.input :subject, label_html: { class: "col-sm-2" }

config/simple_form_bootstrap.rb

SimpleForm.setup do |config|
  config.input_class = "form-control"

  config.wrappers :bootstrap, tag: 'div', class: 'form-group', error_class: 'error' do |b|
    b.use :html5
    b.use :placeholder
    b.use :label, class: "control-label"
    # b.wrapper tag: 'div', class: "col-sm-6" do |ba|
    b.wrapper tag: 'div' do |ba|
      ba.use :input
      ba.use :error, wrap_with: { tag: 'span', class: 'help-inline' }
      ba.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
    end
  end

 config.default_wrapper = :bootstrap

我只想默认使用“横版”

生成的html

...
\<div class="form-group string optional refer_email_form_to">
  <label class="string optional control-label col-sm-2" for="refer_email_form_to">To</label>
  <div>
    <input class="string optional form-control" id="refer_email_form_to"   name="refer_email_form[to]" type="text">
  </div>
</div>
...

我想要更改 &lt;div&gt; 的类,它只包装 &lt;input&gt; 元素,如下所示:

...
<div class="col-sm-6">
  <input class="string optional form-control" id="refer_email_form_to"   name="refer_email_form[to]" type="text">
<div>
...

我从 simple_form 的 github 页面阅读了 README,并搜索了这个问题,我知道我可以通过在 config/simple_form_bootstrap.rb 文件中添加 b.wrapper tag: 'div', class: "col-sm-6" do |ba| 来实现这一点,但真正的问题是我可能会为 div 使用不同的类,可能是 col-sm-9 以其他形式。我在视图中尝试了input_htmlwrapper_html,但wrapper_html 对第一个&lt;div class="form-group"&gt;input_html 的影响仅对&lt;input&gt; 元素有影响

有没有办法在视图中动态更改&lt;input&gt; 的包装器&lt;div&gt;

【问题讨论】:

    标签: twitter-bootstrap ruby-on-rails-4 simple-form


    【解决方案1】:

    改变

    b.wrapper tag: 'div' do |ba|
    

    b.wrapper :my_wrapper, tag: 'div' do |ba|
    

    如下设置输入字段

    = f.input :to, label_html: { class: "col-sm-2" }, wrapper: :bootstrap, my_wrapper_html: { class: "css-class-name-goes-here" }
    

    生成的 HTML 是

    <div class="form-group string optional refer_email_form_to">
      <label class="string optional control-label col-sm-2" for="refer_email_form_to">To</label>
      <div class="css-class-name-goes-here">
        <input class="string optional form-control" id="refer_email_form_to"   name="refer_email_form[to]" type="text">
      </div>
    </div>
    

    备注

    1. 我必须明确指定“引导”包装器才能使其工作。以下设置好像没有生效@9​​87654325@
    2. 当我将包装器命名为 bootstrap 时,它不起作用。当我使用不同的名称(例如 bootstrap_x)时,该设置有效。这可能是我的本地问题,因此仅供您参考,以防您遇到同样的问题。
    3. 如果您对以上所有内容的来源感到好奇,请查看 simple_form README 文件,该文件位于“包装器 API”部分。

    【讨论】:

    • 谢谢你。我确实阅读了 wrappers API,我认为这是解决问题的一种方法,我会尝试这样做。
    猜你喜欢
    • 2022-08-16
    • 1970-01-01
    • 2015-05-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多