У меня есть форма, в которой я прошу пользователя выбрать конкретный набор опций. Моя форма в моей кодовой базе выглядит так:

= f.label :recognition, "How did you hear about us?", required: false, class: "font required-field"

= f.input :recognition, input_html: { class: "recognitionStyling" }, collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, required: false

Теперь я уверен, что это работает, но я хочу немного стилизовать это, и у меня возникли проблемы с этим.

То, что у меня сейчас, выглядит так:

enter image description here

И все же то, что я пытаюсь получить, похоже на это:

enter image description here

Есть ли какой-то конкретный вклад, который мне нужно сделать, чтобы это произошло? Я попытался добавить в свой ввод класс под названием recognitionStyling, который выглядит следующим образом, но я не знаю, является ли CSS способом внести эту модификацию.

.recognitionStyling{
  width: 100%;
}
5
kdweber89 18 Апр 2016 в 20:02

2 ответа

Лучший ответ

Вы можете объединить метку во вход и добавить заполнитель внутри input_html:

= f.input :recognition, 
          input_html: { class: "recognitionStyling" }, 
          prompt: "-- SELECT ONE --", 
          collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, 
          label: "How did you hear about us?", 
          required: true
3
Anthony E 18 Апр 2016 в 18:52

Для этого вы можете скачать бутстрап. Затем вам нужно будет добавить .js и .css к своим ресурсам. Для всех добавленных файлов включите их в верхнюю часть файла application.js или application.css, как показано здесь ниже (без расширения).

В assets / javascript / application.js:

//= require_bootstrap.min

В assets / stylesheets / application.css.scss

 *= require_bootstrap.min    

В файлах views / item / show.html.erb:

<div class="container">
<h2>Form control: select</h2>
<p>The form below contains two dropdown menus (select lists):</p>
<form role="form">
<div class="form-group">
  <label for="sel1">Select list (select one):</label>
  <%= f.select :recognition, input_html: { class: "form-control" }, collection: %w{article blog_post linkedin magazine_ad online_search referral twitter other}, required: false %>
</div>

Проверьте эту ссылку http://www.w3schools.com/bootstrap/bootstrap_forms_inputs.asp

0
user6198643user6198643 18 Апр 2016 в 17:52