2015-10-27 3 views
0

Я использую simple_form для создания формы в моем проекте Rails.Повторить класс для collection_radio_buttons в simple_form

<%= simple_form_for resource, :as => resource_name, :url => invitation_path(resource_name), :html => {:method => :post, id: 'invitations-form', class: 'invitations-form'} do |f| %> 

     <%= f.input :first_name, label: false, placeholder: "Family Member's First Name", input_html: { maxlength: 15, size: 40, value: nil } %> 

     <%= f.input :last_name, label: false, placeholder: "Family Member's Last", input_html: { maxlength: 15, size: 40, value: nil } %> 

     <%= f.input :email, label: false, placeholder: "Enter Email Address", input_html: { value: nil } %> 

     <div class="radio_buttons"> 
     <%= f.label "#{:gender}:"%> 
     <%= f.collection_radio_buttons :gender, [["male", "male"] ,["female", "female"]], :first, :last %> 
     </div> 

     <%= f.input :invitation_relation, label: false, prompt: "I am this person's:", collection: relation_types, label_method: :humanize, input_html: { class: "browser-default dropmodule__input-select" } %> 

     <%= submit_tag "Send Invitation" %> 
    <% end %> 

Я использовал метод collection_radio_buttons для создания, ну, набора переключателей. Я не уверен, что это актуально, но причина, по которой я использовал этот метод вместо f.input :foo, as: :radio_buttons, была связана с тем, что метод ввода не создавал для меня тег метки, который, я думаю, теперь я могу создать с помощью label_html. Я не уверен, что это будет жизнеспособной альтернативой, но эта ошибка беспокоит меня из-за того, что я потратил на нее.

Вот HTML Сгенерированный для соответствующего DIV выше:

<div class="radio_buttons"> 
    <label class="string optional control-label" for="user_gender:">Gender:</label> 
    <span> 
    <input checked="checked" id="user_gender_male" name="user[gender]" type="radio" value="male"> 
    <label class="collection_radio_buttons" for="user_gender_male">male</label> 
    </span> 
    <span> 
    <input id="user_gender_female" name="user[gender]" type="radio" value="female"> 
    <label class="collection_radio_buttons" for="user_gender_female">female</label> 
    </span> 
</div> 

мне нужен входной тег для каждого radio_button содержать класс «с зазором», например, так:

<input checked="checked" id="user_gender_male" class="with-gap" name="user[gender]" type="radio" value="male"> 

и

<input id="user_gender_female" class="with-gap" name="user[gender]" type="radio" value="female"> 

, но я не увенчался успехом. Хотя я действительно хочу решить проблему, поместив класс в метку метода collection_radio_buttons, если есть альтернатива в simple_form, пожалуйста, покажите это как решение.

+0

Вы пробовали '' 'label_html: {class: 'with-gap'}' ''? – Vlad

+0

Да, я действительно ошибся в своем описании. Мне нужно показать класс во входном теге, но я попробовал 'input_html {class:" with-gap "}', и он игнорирует меня. ' – mike0416

ответ

0

ОК, я нашел ответ здесь:

https://stackoverflow.com/a/30619068/4379077

Что мне нужно сделать, это добавить item_wrapper_class как 5-й аргумент метода. Это не похоже, что это необязательно. Когда я пытаюсь удалить его из списка аргументов, мой аргумент класса (6-й аргумент в методе) игнорируется. Вот окончательный ввод:

<div class="radio_buttons"> 
    <%= f.label "#{:gender}:"%> 
    <%= f.collection_radio_buttons :gender, [["male", "male"] ,["female", "female"]], :first, :last, {:item_wrapper_class => 'foo-bar'}, {:class => "with-gap" } %> 
</div> 

и окончательный вывод:

<div class="radio_buttons"> 
    <label class="string optional control-label" for="user_gender:">Gender:</label> 
    <span class="foo-bar"> 
    <input checked="checked" class="with-gap" id="user_gender_male" name="user[gender]" type="radio" value="male"> 
    <label class="collection_radio_buttons" for="user_gender_male">male</label > 
    </span> 
    <span class="foo-bar"> 
    <input class="with-gap" id="user_gender_female" name="user[gender]" type="radio" value="female"> 
    <label class="collection_radio_buttons" for="user_gender_female">female</label> 
    </span> 
</div> 

Если кто-нибудь знает, как сделать inline_wrapper_class по желанию, пожалуйста, дайте мне знать.