Search code examples
cssruby-on-railsrubysimple-form

How to add styling to a rails f.input styling?

I'm working on a rails form in which I have multiples options to ask for a customer. Of which one has multiple options to select from. I was able to have the list of options generated through a collection, however my problem is that I would like the list to stretch out the entire width of the container it is located in. No matter what I try, I'm not able to get anything within it to respond. What is happening is I continue to get the default styles that come with the inputs. I was wondering if anyone could take a look and help me with this situation.

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

.recognitionStyling{
  width: 100%;
}
Solution

  • Since you use Simple Form, you should pass your css class name into input_html options if you want set class to input:

    = f.input :recognition, input_html: { class: 'recognitionStyling' }

    If you want to set css class to label:

    = f.input :recognition, label_html: { class: 'recognitionStyling' }

    If you want to wrap both your input and label (set css class to default Simple Form wrapper):

    = f.input :recognition, wrapper_html: { class: 'recognitionStyling' }