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

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

Что нужно, так это:

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

Я использую

  • простая_форма 2
  • твиттер бутстрап 2

В настоящее время вы можете установить .form-horizontal или .form-vertical, будет ли лучший способ получить «отображение встроенных элементов формы с 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" }

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

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


ruby-on-rails css ruby-on-rails-3 simple-form
person Rubytastic    schedule 28.03.2012    source источник

Ответы (3)


arrow_upward
0
arrow_downward

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

person Nicolas Garnil    schedule 29.03.2012
comment
.form-horizontal Я пробовал, но он начинается с новой строки после каждого поля ввода формы. Я проверяю написание пользовательского построителя форм, чем спасибо - person Rubytastic; 29.03.2012
comment
или вы можете использовать display:inline или display:inline-block для ввода и меток под определенным селектором идентификатора формы. что-то вроде #my_form input { display: inline-block } - person Nicolas Garnil; 29.03.2012
comment
Вы должны использовать .form-inline. - person neersighted; 01.10.2012
comment
По возможности избегайте применения CSS непосредственно к входным данным. Используйте рамки, которые у вас уже есть. - person Rimian; 04.09.2013

arrow_upward
1
arrow_downward

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

.form-group input {
  @include form-control-styling
}
person Jenny Lang    schedule 28.09.2013

arrow_upward
0
arrow_downward

В последней версии бутстрапа есть класс form-inline.

= 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» к входным данным.

person Rimian    schedule 04.09.2013