Несколько входов в одной строке с помощью Twitter Bootstrap и Simple Form 2.0 - PullRequest
Новая
       14

Несколько входов в одной строке с помощью Twitter Bootstrap и Simple Form 2.0

2 голосов
/ 26 февраля 2012

Я использую simple_form 2.0 с загрузчиком Twitter.

Я пытаюсь определить правильный формат оболочки, чтобы получить что-то вроде [city] [State] [Zip]

Я считаю, что моя форма должна быть 

<div class="control-group">
  <%= f.input :city,:wrapper => :small, :placeholder => "City", :input_html => { :class=>"span2", :maxlength => 10},:label => false %>
  <%= f.input :region, :wrapper => :small , :placeholder => "Region", :input_html => { :class=>"span1", :maxlength => 5}, :label => false %>
  <%= f.input :postal_code, :wrapper => :small,  :placeholder => "Postal Code",:input_html => { :class=>"span2", :maxlength => 10},:label => false %>
</div>

Я попробовал эту обертку 

  config.wrappers :small, :tag => 'div', :class => 'controls inline-inputs', :error_class => 'error' do |b|
    b.use :placeholder
    b.use :label_input
  end

Я считаю, что мне нужно будет также определить CSS, но прежде чем я спущусь в кроличью нору, яЯ хотел спросить, встроено ли это где-нибудь.

Ответы [ 5 ]

5 голосов
/ 18 октября 2012

Возможно, что simple_form сделает это.Это помещает входы в одну строку с одной меткой: 

<%= form.input :city, label: 'City/State/Zip', input_html: {class: 'span3'}, wrapper_html: {class: 'controls controls-row'} do %>
  <%= form.input_field :city, class: 'span1' %>
  <%= form.input_field :state, class: 'span1' %>
  <%= form.input_field :zip, class: 'span1' %>
<% end %>

Классы span * являются необязательными.

4 голосов
/ 14 ноября 2012

Используя Bootstrap, вы можете добавить оболочки span.

конфиг / Инициализаторы / simple_form_bootsptrap.rb 

config.wrappers :span3, :tag => 'div', :class => 'span3', :error_class => 'error' do |b|
  b.use :html5
  b.use :placeholder
  b.use :label
  b.wrapper :tag => 'div', :class => 'controls' do |ba|
    ba.use :input
    ba.use :error, :wrap_with => { :tag => 'span', :class => 'help-inline' }
    ba.use :hint,  :wrap_with => { :tag => 'p', :class => 'help-block' }
  end
end

приложение / активы / таблицы стилей / bootstrap_and_overrides.css.less 

@red: #B94A48;

.control-group {
  clear: both;
}

.error .controls .help-inline{
  color: @red;
}

.error .control-label {
  color: @red;
}

.error .controls select{
  border: 1px solid #B94A48;
}

_form.html.rb 

<%= f.input :city,        :wrapper =>"span3" %>
<%= f.input :region,      :wrapper =>"span3" %>
<%= f.input :postal_code, :wrapper =>"span3" %>
2 голосов
/ 26 февраля 2012

Если вы не хотите, чтобы метка изменила компонент label_input только на такой ввод: 

config.wrappers :small, :tag => 'div', :class => 'controls inline-inputs' do |b|
  b.use :placeholder
  b.use :input
end

и вам больше не нужно передавать :label => false.

The :error_class не требуется, так как вы не используете компонент ошибки

0 голосов
/ 20 апреля 2013

Мое решение для горизонтальных форм начальной загрузки: 

.control-group
  = f.label :password
  .controls.controls-row
    = f.input_field :password, :class => 'span2'
    = f.input_field :password_confirmation, :class => 'span2'
0 голосов
/ 13 апреля 2012

Альтернативный метод, который не требует начальной загрузки (я предполагаю, что предоставляет config.wrappers, так как это вызывает исключение в моем проекте, где я не использую TBS): 

<div class="control-group">
    <%= f.input :city,        :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "City",        :input_html => { :maxlength => 10}, :label => false %>
    <%= f.input :region,      :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "Region",      :input_html => { :maxlength => 5},  :label => false %>
    <%= f.input :postal_code, :wrapper_html => { :class => "inline_field_wrapper" }, :placeholder => "Postal Code", :input_html => { :maxlength => 10}, :label => false %>
</div>

Тогда в вашем css: 

.inline_field_wrapper {
    display: inline-block;
}
...