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 %>
Сейчас это выглядит так:
![enter image description here]()
Когда я хочу, чтобы это было так (первый пример здесь: http://simple-form-bootstrap.plataformatec.com.br/articles/new).
![enter image description here]()
Проблема заключается в генерируемом 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
в инициализаторе, чтобы вертикально выровнять метки. Источник