Неверная работа в стиле встроенного бутстрапа Simple_form

У меня есть загрузочная загрузочная загрузка twitter и простая форма генерирует следующее:

<form accept-charset="UTF-8" action="/find_map" class="simple_form form-inline" id="new_location" method="post" novalidate="novalidate"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="p5CSoidWaoGMfHY0/3ElWi0XJVg6Cqi9GqWRNlJLBQg=" /></div>
        <div class="control-group string required"><div class="controls"><input class="string required" id="location_address" name="location[address]" placeholder="Address" size="50" type="text" /></div></div><input class="btn" name="commit" type="submit" value="Find!" />
</form>

Как-то "Найди!" кнопка не будет отображаться в той же строке, что и поле поиска. Любые идеи?

Спасибо!

UPDATE:

Извините, я должен был упомянуть, что вся разметка генерируется simple_form на основе следующего:

<%= simple_form_for @location, :url => find_map_path, :html => { :class => 'form-inline' } do |f| %>

        <%= f.input :address, :label => false, :placeholder => "Address" %>
        <%= f.submit "Find!", :class => 'btn' %>

<% end %>

Итак, действительно, проблема с созданной разметкой, похоже, связана с тем, что я запускал установку bootstrap для simple_form и т.д.

На приведенном выше рисунке показана прямая html-форма

<form class="form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <button type="submit" class="btn">Sign in</button>
</form>

... выше единицы, сгенерированной simple_form.

Ответ 1

Я думаю, что здесь есть пара вопросов. Одним из них является форматирование, и путь simple_form добавляет <div> вокруг поля ввода. Предложение @Ron использования input_field работает для меня с simple_form 2.0.1. Мой пример - поиск имени в таблице контактов. Ниже показано, что текстовое поле и кнопка появляются рядом:

<%= simple_form_for :contact, :method => 'get', 
    :html => { :class => 'form-search' } do |f| %>
  <%= f.input_field :search, :placeholder => "Name", 
      :class => "input-medium search-query" %>
  <%= f.submit "Find!", :class => "btn" %>
<% end %>

Другая проблема заключается в том, что кажется, что simple_form обычно предполагает, что вы хотите работать с именами моделей и полей. В приведенном выше примере вместо @model используется :symbol в качестве первого аргумента, предложенного здесь. Но это все еще генерирует поле ввода с именем contact[search], поэтому вам нужно сказать своему контроллеру, как с этим бороться.

Я думаю, что в этом случае проще будет просто использовать simple_form и вместо этого использовать что-то вроде формы рядом с началом Райана Бейтса Railscast # 240, Поиск, сортировка, Paginate с AJAX:

<%= form_tag contacts_path, :method => 'get', :class => "form-search" do %>
  <%= text_field_tag :search, nil, :placeholder => "Name", 
      :class => "input-medium search-query" %>
  <%= submit_tag "Find!", :name => nil, :class => "btn" %>
<% end %>

Теперь поле называется "поиск", и я могу использовать его в моем методе контроллера #index примерно так:

@contacts = @contacts.search(params[:search])

Предполагая, что у меня это в моей модели:

def self.search(search)
  if search
    where('lower(name) LIKE ?', "%#{search.downcase}%")
  else
    scoped
  end
end

Ответ 2

Он создает подформы, потому что вы передаете input в simple_form. Вместо этого используйте input_field. (BTW, это также работает с simple_fields_for).

Ответ 3

Вам нужно настроить классы div control-group и controls для отображения в виде inline-block, когда они находятся в форме form-inline:

form.form-inline div.control-group { display: inline-block; }
form.form-inline div.control-group div.controls { display: inline-block; }

Ответ 4

Добавление в ответ "Отметить":

Итак, input_field существует только для создания входного компонента, он не даст вам никакой маркировки/ошибки/оболочки. Это означает, что вы не получите ни одного или тега, обертывающего поле, вы должны сделать это вручную, если хотите.

Теперь об использовании формы с объектом SimpleForm является FormBuilder, что означает, что он был создан для работы с пространством имен, являясь им объектом или символом. SimpleForm simple_form_for == Rails 'form_for, вам всегда нужно пространство имен объектов для работы.

Для такого простого случая, как форма поиска, вам лучше с помощью простых форм-помощников, таких как form_tag, как вы указали. Там нет необходимости полагаться на simple_form_for или form_for для этого, я согласен, и я обычно иду по этому пути.

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

Ответ 5

Измените: html = > {: class= > 'form-inline'} на: html = > {: class= > 'form-horizontal'}

Ответ 6

Вы не можете переместить кнопку ввода рядом с адресом ввода? Я думаю, что это решит проблему.

<form accept-charset="UTF-8" action="/find_map" class="simple_form form-inline" id="new_location" method="post" novalidate="novalidate">
      <div style="margin:0;padding:0;display:inline">
    <input name="utf8" type="hidden" value="&#x2713;" />
    <input name="authenticity_token" type="hidden" value="p5CSoidWaoGMfHY0/3ElWi0XJVg6Cqi9GqWRNlJLBQg=" />
      </div>
      <div class="control-group string required">
    <div class="controls">
        <input class="string required" id="location_address" name="location[address]" placeholder="Address" size="50" type="text" />

        <!-- move the button to here -->
        <input class="btn" name="commit" type="submit" value="Find!" />
    </div>
      </div>

</form>

Ответ 7

Пожалуйста, всем людям с этой проблемой, не используйте макет жидкости и не забудьте указать документ документа HTML5 для документов.