Simple_form_for rails переключатель в линию

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

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

Ответы

Ответ 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

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

Ответ 2

Используя Simple Form с 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

Ответ 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)

Ответ 4

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

Ответ 5

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

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

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

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

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

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

The above yields this result

Ответ 6

Просто для тех, кто использует базу zurb с простой формой chekbox, пришел сюда:

slim view:

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

СКС:

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