How can I add multiple classes to a Rails form input with erb?


Tags: css,ruby-on-rails,forms

Problem :

So this is what I want to do:

<% for x in 6..10 %>
  <%= form_for(current_user.responses.new, html:{class: 'col-xs-2 col-md-1 col-lg-1 vcenter center'}) do |f, index| %>
    <%= f.text_field :response_value, label: false, :class => "my-width <%= x %>" %>
  <% end %>
<% end %>

But it doesn't work. I want to have two classes on the input field, one being a normal css class using html. The other using an erb variable, in this case 'x'.

I've tried

<%= f.text_field :response_value, label: false, :class => "my-width center vcenter", :class => x %>

Which only assigns the second :class, and overrides the first.

How can I assign both these classes ("my-width" and x) to the form input field?



Solution :

<%= f.text_field :response_value, label: false, :class => "my-width <%= x %>"

Isnt valid ruby syntax. Im suprised your not getting an error.

Use string interpolation:

<%= f.text_field :response_value, label: false, :class => "my-width #{x}" %>

Also its worth noting you should use html classes that are solely a number.

Something like:

:class => "my-width-#{x}"

Is valid.


    CSS Howto..

    how to align horizontally using CSS

    How to make sidebar always visible in the Semantic UI

    CSS Tooltip has different position in different browsers. How can I account for this?

    how do i allign my div containers using css

    How to display red borders on required or invalid value input element in Chrome just like Firefox behaviour for HTML5 validation?

    Foundation Framework: How can I get multiple links in a mobile drop-down to be horizontally aligned and not stacked?

    How to have proper spacing between items in the navbar regardless of word size?

    how to make table header freeze/fixed when scrolling in html/css?

    How to change CSS attribute at all div inside td with class

    How to make the logo drop a bit in the nav menu and other suggestions

    How to tooltip keep active using HTML and CSS or Jquery?

    How to position a div differently for a specific page?

    CSS how to apply :first-child and :last-child

    How to Make a Fluid Layout

    li:before{ content: “■”; } How to Encode this Special Character as a Bullit in an Email Stationery?

    How to use JQuery to identify CSS 'text-decoration' [closed]

    How do I remove a hover effect if the Element has focus?

    How to override background of Bootstrap Material Design theme?

    How to set a child's element 50px narrower to its parent element in css? [closed]

    how to change inline css to free attributes

    How to apply table cell formatting using CSS

    How to position main content below header and footer in css

    How to create a Twitter Bootstrap Textarea

    How to include the PHP file that is outside the folder where main PHP file exists?

    How to only select a displayed element using CSS

    How can I make an H4 element behave like an HR when floats are present

    In IE6, how to implement a:hover?

    How to select nth sibling after specific class based on any number multiple with CSS? [duplicate]

    How can I remove the underline of a linked image in Firefox and Chrome?

    How to style a

    inside a div with css [closed]