Подтвердить что ты не робот

Simple_form: как изменить класс оболочки ввода? (А не эффект wrapper_html)

У меня проблема при использовании 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" }

конфигурации /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>
...

Я хочу изменить класс <div>, который просто переносит элемент <input>, примерно так:

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

Я прочитал README на странице simple_form github и искал эту проблему, но знаю, что могу достичь этого, добавив b.wrapper tag: 'div', class: "col-sm-6" do |ba| в файл config/simple_form_bootstrap.rb, но реальный проблема в том, что я могу использовать другой класс для div, возможно col-sm-9 в другой форме. И я попробовал input_html, wrapper_html в представлении, но эффекты wrapper_html для первых <div class="form-group"> и input_html влияют только на элемент <input>

Есть ли способ динамически изменить обертку <input> <div> в представлении?

4b9b3361

Ответ 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>

Примечания

  • Я должен явно указать оболочку "bootstrap", чтобы она работала. Следующая настройка не действует [t24 >
  • Это не работает, когда я называю обертку bootstrap так же, как вы. Настройка работает, когда я использую другое имя, например bootstrap_x. Это может быть моя локальная проблема, так что это просто для вашей информации, если вы столкнетесь с одной и той же проблемой.
  • Если вам интересно, откуда все это вышло, посмотрите файл simple_form README, он находится в разделе "API оберток".