rails/css forms error issue

[Chris Maxwell]

Hi All,

Has anyone encountered this rails/css forms error issue? ...the rails
generated <div class="fieldWithErrors"> that surrounds the input field
with the error causes the field to flow outside its container and
messes up the forms spacing/alignment.

For example, if HTML-wise I organize my form like this:

<p><label for="login">Username</label><input id="login" name="login"
type="text" /></p>
<p><label for="password">Password</label><input id="password"
name="password" type="password" /></p>

Where the css looks like this:

form p {
clear: both;
}

form label {
float: left;
width: 11em;
}

form input {
float: left;
width: 200px;
}

Everything works fine until the user fails a validation. I tried a
bunch of things to bring the div back into the flow, but nothing
worked. Then I tried to position it correctly using floats and margin
fixes on the rails generated div and that worked fine everywhere but
IE (see attached).

I can't figure out where the extra spacing is coming from and I'm going nuts?

Chris

[Tom Harrison]

Yes, this can be a real pain.  It's not "really" a Rails issue, just that Rails decides to wrap the CSS-intolerant form fields with DIVs.  You may need to make the padding, and/or margin and/or border attributes of the div, and of the surround-able input fields have size 0 or maybe even negative.  If you don't have Firebug installed on Firefox, this is the tool to use to sort this out, since it allows you to make live changes to the CSS and see how it looks.

You can take a look at how I handled it on http://doagreenthing.com/signup (just hit Sign Up without making any entries).  I am using something like the out-of-the-box rails validations code.  All I recall is that it was painful, not what darks arts and incantations were required to make it work on all browsers.

Hope this helps --

Tom

[Chris Maxwell]

OK I solved it, first you can't have a DIV in a paragraph tag, so
trying to force it across browsers was the wrong approach for me.

What I did is change the rails default from div to span...

# File actionpack/lib/action_view/helpers/active_record_helper.rb, line 6:

------------------------------------------------------------------------------
module ActionView
class Base
@@field_error_proc = Proc.new{ |html_tag, instance| "<span
class=\"fieldWithErrors\">#{html_tag}</span>" }
cattr_accessor :field_error_proc
end
------------------------------------------------------------------------------

...and then styled with default selectors.

Chris

[James K]

You can also set this from your environment file or an initializer,
which may be a little more maintainable in the long run.

ActionView::Base.field_error_proc = Proc.new {|html_tag,
instance| ... }

On Jun 30, 10:25 pm, "Chris Maxwell" <cmaxw...@ojala.com> wrote:
> OK I solved it, first you can't have a DIV in a paragraph tag, so
> trying to force it across browsers was the wrong approach for me.
>
> What I did is change the rails default from div to span...
>
> # File actionpack/lib/action_view/helpers/active_record_helper.rb, line 6:
>
> ------------------------------------------------------------------------------
> module ActionView
>   class Base
>     @@field_error_proc = Proc.new{ |html_tag, instance| "<span
> class=\"fieldWithErrors\">#{html_tag}</span>" }
>     cattr_accessor :field_error_proc
>   end
> ------------------------------------------------------------------------------
>
> ...and then styled with default selectors.
>
> Chris
>

> On Mon, Jun 30, 2008 at 8:19 PM, Tom Harrison <tom.harrison...@gmail.com> wrote:
> > Yes, this can be a real pain.  It's not "really" a Rails issue, just that
> > Rails decides to wrap the CSS-intolerant form fields with DIVs.  You may
> > need to make the padding, and/or margin and/or border attributes of the div,
> > and of the surround-able input fields have size 0 or maybe even negative.
> > If you don't have Firebug installed on Firefox, this is the tool to use to
> > sort this out, since it allows you to make live changes to the CSS and see
> > how it looks.
>

> > You can take a look at how I handled it onhttp://doagreenthing.com/signup

> > (just hit Sign Up without making any entries).  I am using something like
> > the out-of-the-box rails validations code.  All I recall is that it was
> > painful, not what darks arts and incantations were required to make it work
> > on all browsers.
>
> > Hope this helps --
>
> > Tom
>

[gsterndale]

I ran into the same problem and used James' approach...

ActionView::Base.field_error_proc = Proc.new do |html_tag,
instance_tag|
"<span class='field_error'>#{html_tag}</span>"
end

[Jacob Burkhart]

Why is a span better than a div here? Wouldn't it be better to write CSS to fix this than to override the field_error_proc?

Isn't a span really just a div with

display: inline;

And isn't a div really just a span with

display:block;

[Chris Maxwell]

In my case I wanted to use a paragraph to encapsulate a label and
input (a row) in my form. This article describes what the difference
is with <span>'s and <div>'s and why I could not get the div to render
like I wanted it to using all the usual CSS tricks...

http://webdesign.about.com/od/htmltags/a/aa011000a.htm

Chris

[Matt Griffin]

Hi Chris,

You've usually got to provide a little bit of styling to account for the fact that you've introduced a block element where there wasn't one before.

Try:

div.fieldWithErrors {
  display: inline;
  margin: 0;
  padding: 0;
}

-Matt

[Matt Griffin]

<div> isn't allowed within <p> so it won't validate and might cause issues on some browsers (since it ends the p and inserts the margin space).  If you surround your fields with <div> instead of <p> then there is no difference between using a span and an inlined div.

-Matt

On Tue, Jul 1, 2008 at 10:01 AM, Jacob Burkhart <igot...@gmail.com> wrote: