Twitter-Bootstrap: Simple_form не делает горизонтальную форму или правильный вывод HTML?

Я не знаю, почему его не дублирует, как пример. Когда я добавлю следующий код для этой формы:

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), :html => { :class => "form-horizontal" } ) do |f| %>
<%= f.input :user_name, :input_html => { :class => "span3" }, :hint => "just letters and numbers please." %>
<% end %>

Сейчас это выглядит так:

Когда я хочу, чтобы это было так (первый пример здесь: http://simple-form-bootstrap.plataformatec.com.br/articles/new).

Проблема заключается в генерируемом HTML. Мой HTML:

<div class="input string optional">
 <label for="user_user_name" class="string optional"> User name</label>
  <input type="text" size="50" name="user[user_name]" maxlength="25" id="user_user_name" class="string optional span3">
   <span class="hint">no spaces or special characters, just letters and numbers please</span>
</div>

И Simple_forms HTML:

<div class="control-group string required">
 <label for="article_name" class="string required">
  <abbr title="required">*</abbr> Name
 </label>
  <div class="controls">
   <input type="text" size="50" name="article[name]" id="article_name" class="string required span6">
    <p class="help-block">add your article title here</p>
  </div>
</div>

Совершенно иная. Я думаю, что генератор Bootstrap не генерируется? Как вы думаете? Что мне делать?

Ресурсы

https://github.com/plataformatec/simple_form

https://github.com/rafaelfranca/simple_form-bootstrap

http://simple-form-bootstrap.plataformatec.com.br/

Ответ 1

Добавили ли вы инициализатор для simple_form? этот инициализатор устанавливает обертки, которые должны использоваться для вывода бутстрапа html

rails generate simple_form:install --bootstrap

Обратите внимание, что это работает только с simple_form 2!

Ответ 2

Вывод

rails g simple_form:install --bootstrap

дает дополнительные инструкции:

Inside your views, use the 'simple_form_for' with one of the Bootstrap form
classes, '.form-horizontal', '.form-inline', '.form-search' or
'.form-vertical', as the following:

  = simple_form_for(@user, :html => {:class => 'form-horizontal' }) do |form|

Итак, вы должны добавить параметр :html => {:class => 'form-horizontal' } в каждый _form.html файл, который вы хотите изменить в стиле формы. Вы можете использовать "form-search", "form-inline", "form-horizontal" или "form-vertical" (по умолчанию).

Чтобы установить форму по умолчанию в горизонтальную, отредактируйте

lib/templates/erb/scaffold/_form.html.erb

и измените первую строку на это (используя ваше предпочтительное имя класса формы):

<%%= simple_form_for(@<%= singular_table_name %>, :html => {:class => 'form-horizontal' } ) do |f| %>

Для тех, кто использует HAML, путь и формат файла будут разными.

Ответ 3

Установлена ли ваша форма css "form-horizontal" в выведенном HTML?

Если нет, я думаю, вам нужно обернуть настройку: html: class в теге simple_form_for следующим образом:

<%= simple_form_for(resource, :as => resource_name, :url => registration_path(resource_name), {:html => { :class => "form-horizontal" }} ) do |f| %>

Надеюсь, что это поможет.

Ответ 4

Не уверен, почему вы отметили @ahmeij ответ как правильный.

Правильное решение находится в вашем комментарии - вам нужно убедиться, что вы используете simple_form версии 2, а не версию 1. Так же:

gem "simple_form", "~> 2.0.0.rc"

или вы можете сделать это, как пример простого загрузочного приложения simple_form на github делает это:

gem 'simple_form', git: 'git://github.com/plataformatec/simple_form.git

И если вы не выполнили установку, то правильная команда

rails generate simple_form:install --bootstrap

Ответ 5

Если вы хотите сделать это с помощью simple_form v3 rc1, вы можете выполнить шаги, которые я изложу здесь, в своем блоге. Я только что изучил все это и внедрил его:

http://www.iconoclastlabs.com/blog/using-twitter-bootstrap-3-with-simple_form

Ответ 6

скопируйте конфигурацию \initializers\simple_form.rb в ваше приложение, все будет в порядке

Ответ 7

Я пробовал много разных решений, но ничего не помогло, пока я не добавил строку wrapper: :horizontal_form к каждому входу формы. И у меня есть последняя версия simple_form: 3.2.1

Например:

= f.input :payment_term, wrapper: :horizontal_form

Подсказка: [https://gist.github.com/chunlea/11125126/][1]

Ответ 8

Для simple_form ('~> 3.5') и bootstrap 4 выполните следующее изменение в simple_form_bootstrap.rb initializer:

config.wrappers :horizontal_form, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|

config.wrappers :horizontal_form, tag: 'div', class: 'form-group row', error_class: 'has-error' do |b|

Чтобы изменить все формы на горизонтальные, сделайте следующее изменение:

config.default_wrapper = :vertical_form

config.default_wrapper = :horizontal_form

И изменить только одну форму:

<%= simple_form_for(@model, wrapper: :horizontal_form) do |f| %>

Также вам может потребоваться заменить все вхождения control-label на form-control-label в инициализаторе, чтобы вертикально выровнять метки. Источник