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

Question

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

<%= 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 / article / 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 /

Answer 1

Вывод

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 файлу, для которого вы хотите изменить стиль формы.,Вы можете использовать «поиск по форме», «встроенный по форме», «горизонтальный по форме» или «вертикальный по форме» (по умолчанию).

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

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

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

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

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

Answer 2

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

rails generate simple_form:install --bootstrap

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

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

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

Answer 4

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

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

Answer 5

Не знаю, почему вы отметили ответ @ 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

Answer 6

Для simple_form ('~> 3.5') и начальной загрузки 4 выполните следующие изменения в инициализаторе simple_form_bootstrap.rb:

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 в инициализаторе, чтобы выровнять метки по вертикали. Источник

Answer 7

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

Например:

= f.input :payment_term, wrapper: :horizontal_form

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

Answer 8

скопируйте config \ initializers \ simple_form.rb в ваше приложение, все будет хорошо