Question

I use the simple-form gem in a rails 3.1 project together with twitter bootstrap. I have several form views which all look fine. But now I like to style the text input field in one of the forms so it gets a bit smaller. The text input field is located in the edit form view of one of my controllers called “roles”. The partial for the form looks like this:

= simple_form_for @role, :html => { :class => 'form-horizontal' } do |f| 
  = f.error_notification
  = f.input :name
  = f.input :description
  .form-actions
    = f.button :submit, :class => 'btn-primary'
    = link_to t('.cancel', :default => t("helpers.links.cancel")), roles_path, :class => 'btn'

There is a style file under:


app/assets/stylesheets/roles.css.scss


which was created with the scaffold command. I tried to put some styling in here but this results in a change in every form of my application. Is there a good way to change the styling of a text input field only for one special form view with simple form? Where should I put the styling and how would the styling look like if I’d like to have the input text field in the size: width 100px to height 50px?

Answer 1

You need to know that even if you have a special CSS file just for roles. In the end, every CSS file is bundled up and served together. This means, that roles.css will be loaded on every page, which results in the behavior you described.

If you want to style a single form, you can do this by adding a class:

= simple_form_for @role, :html => { :class => 'form-horizontal roles-form' } do |f| 

Now you can scope your CSS definitions to .roles-form and they will only apply to this single form.