Geek Answers Handbook

How to change and style a simple f.input tag form

I have a form in which I ask the user to choose between a specific collection of options. My form in my code base is as follows:

= 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

Now I'm sure it works, but I want to style it a bit and have problems with it.

Now I have the following:

enter image description here

However, I am trying to get something similar to this:

enter image description here

Is there any specific input that I would have to allow for this? I tried adding a class to my contribution called recognitionStylingthat looks like this, but I don’t know the CSS way to do this.

.recognitionStyling{
  width: 100%;
}
+4
source share
2 answers

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

bootstrap . .js .css . application.js application.css, ( ).

/javascript/application.js:

//= require_bootstrap.min

/stylesheets/application.css.scss

 *= require_bootstrap.min

/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

More articles:


All Articles