Here’s a real quick tip which fixes a problem I’ve come across time and time again.

Consider the form below:

Wine Form

Here’s a snippet of what the code looks like to create 3 of those fields:

<div class='field'>
    <%= f.label(:vintage) %>
    <%= f.text_field :vintage, :size => 5 %> <small>Optional - e.g. 1990</small>
</div>
<div class='field'>
    <%= f.label(:alcohol) %>
    <%= f.text_field :alcohol, :size => 5 %>% <small>e.g. 5.6 or 10.25 </small>
</div>
<div class='field'>
    <%= f.label(:residual_sugar) %>
    <%= f.text_field :residual_sugar, :size => 5 %> g/L <small>e.g. 45 </small>
</div>

You can see I’ve added a few little side notes next to each field using the small tag. The problem with adding a note inline next to a field in Rails is when the form is submitted and the data isn’t valid. The form returned looks like this:

Form with Errors

As you can see, the little notes get pushed over onto the next line. That’s because Rails puts a div around the fields that are invalid. These divs are assigned a “fieldWithErrors” class. Now this can be useful for highlighting fields that have errors. For example, I like to highlight the label for the field with an error in red text. So I add this to my CSS: 

div.fieldWithErrors label {
    color: #933; /* mid to dark red */
}

And that works great, but we still have this problem with the field notes jumping down. The reason for that is because the element Rails uses to put around the invalid field is a div and by default a div is displayed as a block element. We can fix this problem by forcing the browser to render it as an inline element by using the following CSS:

div.fieldWithErrors {
    display: inline;
}

Now it looks like this:

Form with Errors - Fixed

So there you have it. A simple little tip some of you out there might find useful.