simple_form_for rails radio button inline

Question

Я стараюсь, чтобы мои кнопки отображались в строке, а также имеют значение по умолчанию, потому что оно не может быть пустым. Я использую useplataformatex/simple_form и bootstrap.

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, style: "display:inline", default: true 

Он делает это:

<span> 
    <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" /> 
    <label class="collection_radio_buttons" for="workout_is_private_true">Private</label>  
</span> 
<span> 
    <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" /> 
    <label class="collection_radio_buttons" for="workout_is_private_false">Public</label> 
</span> 

Очевидно, что style: не работает должным образом, но я не уверен, что будет работать.

После другого предложения я добавил

.radio_buttons { display:inline; } 

= f.collection_radio_buttons :is_private, [[true, 'Private'], [false, 'Public']], :first, :last, :item_wrapper_class => 'radio_buttons', :default => true 

И получил:

<span class="radio_buttons"> 
    <input id="workout_is_private_true" name="workout[is_private]" type="radio" value="true" /> 
    <label class="collection_radio_buttons" for="workout_is_private_true">Private</label> 
</span> 
<span class="radio_buttons"> 
    <input id="workout_is_private_false" name="workout[is_private]" type="radio" value="false" /> 
    <label class="collection_radio_buttons" for="workout_is_private_false">Public</label> 
</span> 

Просто еще к сведению, что значение по умолчанию по-прежнему не работает.

Answer 1

Если вы хотите их рядный , вам необходимо предоставить ярлыки inline class: :item_wrapper_class => 'inline'

Вот пример использования вашего кода:

= f.input :is_private, 
      :collection => [[true, 'Private'], [false, 'Public']], 
      :label_method => :last, 
      :value_method => :first, 
      :as => :radio_buttons, 
      :item_wrapper_class => 'inline', 
      :checked => true 

EDIT: Я просто понял, что мой ответ был более конкретен в simple_form + самозагрузки, поскольку самозагрузки уже имеет стили, определенные при выдаче лейбла класса инлайн. Вы должны иметь возможность использовать мой пример, но при создании пользовательского css вам просто потребуется больше работы.

Answer 2

Вы можете попробовать

f.collection_radio_buttons :options, [[true, 'Yes'] ,[false, 'No']], :first, :last ,:style =>"display:inline", :default => true 

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

collection_radio_buttons(object, method, collection, value_method, text_method, options = {}, html_options = {}, &block) 

Answer 3

Этот ответ, возможно, не сработал, потому что я не использую Bootstrap. Но есть и другие способы. Я ударил div с помощью класса = «радиокнопки» вокруг кнопок и метки вручную. Затем я добавил это в моем стиле лист (SASS):

.radio-buttons { 
    margin: .5em 0; 
    span input { 
    float: left; 
    margin-right: .25em; 
    margin-top: -.25em; 
    } 
    #this grabs the MAIN label only for my radio buttons 
    #since the data type for the table column is string--yours may be different 
    label.string { 
    margin-bottom: .5em !important; 
    } 

    clear: both; 
} 

.form-block { 
    clear: both; 
    margin-top: .5em; 
} 

.radio-buttons span { 
    clear: both; 
    display:block; 
} 

Это сделает радиокнопки рядным на все структуры, хотя это переделано, чтобы выглядеть лучше для Zurb Foundation. ;)

Answer 4

Используя Простую форму с Bootstrap 3, вы можете использовать класс radio вместе с параметрами item_wrapper_class и item_wrapper_tag.

= f.collection_radio_buttons :sort, [[foo,bar],[foo,bar], 
    :first, :last, 
    item_wrapper_class: :radio, 
    item_wrapper_tag: :div 

Answer 5

Простое решение:

Добавить класс в пункт обертки. Этот класс может быть любым, что вы выберете.Я использую «встроенный» в приведенном ниже примере:

form.input :my_field, as: 'radio_buttons' wrapper_html: {class: 'inline'} 

Затем определить некоторые CSS, который применяется только для группы радиокнопок (и только фактические радиокнопки, а не ярлык товар):

input.radio_buttons.inline label.radio{ 
    display: inline-block; 
} 

Вот пример того, что это дает:

Answer 6

Просто для кого-то, кто, используя фундамент zurb с чекбокса простой формы пришли сюда:

стройный вид:

= f.input :company_stages, as: :check_boxes, required: true 

СКС:

// simple-form checbox 
.checkbox { 
    margin-right: 20px; 
    display: inline-block; 
}