Переключатель кнопки simple_form_for для рельсов

Question

Я пытаюсь, чтобы мои кнопки отображались встроенными, а также имеют значение по умолчанию, потому что оно не может быть пустым. Я использую plataformatex / 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

Если вы хотите, чтобы они были встроенными, вам нужно присвоить меткам встроенный класс, выполнив: :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

РЕДАКТИРОВАТЬ: Я только что понял, что мой ответ был более конкретным для simple_form + bootstrap, так как bootstrap уже имеет стили, определенные при присвоении метке встроенного класса. Вы должны быть в состоянии использовать мой пример, однако, вам потребуется больше усилий для создания собственного CSS.

Answer 2

Используя простую форму с 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 3

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

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 4

Ответ выше, возможно, не сработал, потому что я не использую Bootstrap.Но есть и другие способы.Я нажал div с переключателями class = "radio-button" вокруг кнопок и пометил вручную.Затем я добавил это в свою таблицу стилей (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 5

Только для тех, кто использовал zurb Foundation с чекбоксом простой формы:

тонкий вид:

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

СКС:

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

Answer 6

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

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

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

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

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

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