Kvass
Kvass

Reputation: 8434

Rails -- line breaks appearing between form fields with errors

I am having trouble trying to get rid of the extra line breaks Rails seems to insert between fields with errors.

I created a new rails app, created a scaffolding called "users" with a name and an age, and then said validates :name, :presence => true and validates :age, :presence => true. Then I booted up the users/new page and just clicked "submit" without entering anything in the fields to generate the error page. What happened was that between the "name" label and the field for entering the name, an extra line break was inserted. Same with the "age" label and its field. How do I stop this extra line break from happening?

Upvotes: 5

Views: 2192

Answers (2)

MichaelHajuddah
MichaelHajuddah

Reputation: 557

.field_with_errors:nth-child(odd) {
  padding: 2px;
  display: table;
}
.field_with_errors:nth-child(even) {
 padding: 2px;
 display: inline;
}

That's what I ended up changing mine to, since the extra line breaks were sort of nice on the labels but I didn't want the line breaks on the actual form fields.

Upvotes: 0

TreyE
TreyE

Reputation: 2739

Ach, just got bitten by this one too.

When you have form fields with errors rails changes the output of form helper methods like #label and #text_field.

The result is your nice little "label" and "input" tags are still being emitted - just "stealth" wrapped with a surrounding div. For example:

f.label :name

goes from:

<label for="name">Name</label>

to:

<div class="field_with_errors"><label for="name">Name</label></div>

The default behavior of a div is "block" - which is causing your line breaks.

You can fix this by changing the css. As an example:

div.field_with_errors {
  display: inline;
}

Upvotes: 12

Related Questions