CSS issue with div fieldWithErrors

Rails
1

Hi,

What’s the correct way of writing a form?

I do the following:

<%= form_for … %>

<%= f.label :whatever %> <%= f.text_field :whatever %>

<%- end -%>

Then I do some CSS to have all the labels aligned, and all the input
fields aligned. The problem happens when a field is not valid, Rails
wraps it in this stupid div with class fieldWithErrors (and what the
hell is that camelCaseCrap?), so it blows my design out.

Is there somewhere some easy CSS to circumvent that trouble? Nothing
fancy, just a simple and clean form.

2

Fernando P. wrote:

Hi,

What’s the correct way of writing a form?

I do the following:

<%= form_for … %>

<%= f.label :whatever %> <%= f.text_field :whatever %>

<%- end -%>

Then I do some CSS to have all the labels aligned, and all the input
fields aligned. The problem happens when a field is not valid, Rails
wraps it in this stupid div with class fieldWithErrors (and what the
hell is that camelCaseCrap?), so it blows my design out.

If that’s ruining your design, then your CSS has problems. It should be
easy to define the CSS for fieldWithErrors so it doesn’t cause layout
issues. (And it’s not stupid – it’s a way of clearly showing the user
where the errors are.)

For myself, I don’t have this problem because I lay out my forms with
table elements. (Stop screaming. :slight_smile: They have the semantics of tables,
so this is justified.)

Is there somewhere some easy CSS to circumvent that trouble? Nothing
fancy, just a simple and clean form.

Best,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

3

Ok I found a fix: put that in an initializer:

ActionView::Base.field_error_proc = Proc.new do |html_tag, instance|
“<span class=“fieldWithErrors”>#{html_tag}”
end

4

If that’s ruining your design, then your CSS has problems.
Nope. It is extremely common, to see forms created with

tags to
separate each input. A div inside a

tag is not allowed by html
standards, look for the internet, plenty people have this

problem.

But you are right with tables, they can greatly simplify css and avoid
headaches, I already use tables for some of my layouts because they are
100% cross browser compatible.

5

How do you manage that? IE 5, 6 and 7 don’t support the table
element :P. If I had my choice, I’d use them too, but until IE 6 and 7
finally die… I can’t do it!

On Oct 1, 5:48 am, Marnen Laibow-Koser <rails-mailing-l…@andreas-

6

Fernando P. wrote:

If that’s ruining your design, then your CSS has problems.

Nope.

Yup.

It is extremely common, to see forms created with

tags to
separate each input. A div inside a

tag is not allowed by html
standards, look for the internet, plenty people have this

problem.

Then

tags are not the right thing to use here. Replace them with

s. Problem solved.

But you are right with tables, they can greatly simplify css and avoid
headaches, I already use tables for some of my layouts because they are
100% cross browser compatible.

Not always. And I’m certainly not advocating table-based layouts in
general – only when the semantics are actually tabular.

Best,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]

7

Josh Infiesto wrote:

How do you manage that? IE 5, 6 and 7 don’t support the table
element :P.

Of course they do.

If I had my choice, I’d use them too, but until IE 6 and 7
finally die… I can’t do it!

Nonsense.

On Oct 1, 5:48�am, Marnen Laibow-Koser <rails-mailing-l…@andreas-

Best,

Marnen Laibow-Koser
http://www.marnen.org
[email protected]