simple_form элементы формы появляются без строки? - PullRequest
Новая
       0

simple_form элементы формы появляются без строки?

2 голосов
/ 29 марта 2012

Можно ли написать оболочку или стиль simple_form, чтобы элементы формы находились рядом друг с другом на одной строке?

Что нужно сделать так:

поиск: [поле ввода текста] страна [раскрывающееся текстовое поле] город [раскрывающееся текстовое поле]

Я использую

  • simple_form 2
  • twitter bootstrap 2

В настоящее время вы можете установить .form-горизонтальный или .form-вертикальный, будет ли лучшим способом получить «отображение элементов строки в 1 строку» путем добавления правил в CSS или создания оболочки Simple_form?

Обновитьнекоторые haml / css: 

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


  = f.input :age_from,
            :collection => 18..60,
            :default => 18,
            :blank =>false,
            :label => 'Age from',
            :item_wrapper_class => 'inline',
            :input_html => { :style => "width: 102px" },


  = f.input :age_to,
            :collection => 18..60,
            :default => 25,
            :blank => false,
            :label => 'Age to',
            :item_wrapper_class => 'inline',
            :input_html => { :style => "width: 102px" }

Использование обычной начальной загрузки css больше ничего.item_wrapper_class не работает для целого элемента, как для одной радиокнопки в коллекции.

Мне нужен хороший способ обернуть все элементы коллекции в строку (age to и age from)

Ответы [ 3 ]

1 голос
/ 28 сентября 2013

Я не могу добавить комментарий к человеку выше, потому что у меня нет репутации, но просто возьмите входные данные, указав класс уровня выше, а затем используйте миксин, который вы предоставляете стилю управления формой сделать так же, как управление формой: 

.form-group input {
  @include form-control-styling
}
0 голосов
/ 04 сентября 2013

Последняя версия bootstrap имеет класс in-line.

= simple_form_for(@session, :html => { :class => 'form-inline' }) do |f|

Вы также можете создавать собственные обертки.Это разметка из документации начальной загрузки: 

<form class="form-inline" role="form">
  <div class="form-group">
    <label class="sr-only" for="exampleInputEmail2">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label class="sr-only" for="exampleInputPassword2">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
  </div>
  ...
</form>

Итак, если вы создали пользовательскую оболочку (что-то вроде): 

SimpleForm.setup do |config|
  config.wrappers :bootstrap, :tag => 'div', :class => 'form-group' do |b|
    b.use :label
    b.use :input
  end
end

Это должно делать большую часть того, что вам нужно.Часть, которую я до сих пор не разработал, состоит в том, как добавить класс 'form-control' к входам.

0 голосов
/ 29 марта 2012

Вы можете использовать .form-Horizontal (для меня самое простое и понятное решение) или написать пользовательский ввод или пользовательские конструкторы форм. Проверьте документацию на https://github.com/plataformatec/simple_form.

...