Question

I have client-side validations on a form that are outputting as label tags. They are displaying the way I want them to, but their width does not automatically adjust to the content within it. I believe this is caused by the width of the container that the form is inside of. Can someone help me fix this? Here is a jsFiddle:

http://jsfiddle.net/4eZY6/3/

If you focus on, then off of the fields you’ll see the validation errors.

Altering the width of the element .home-form-container from 250px to 450px fixes it, but I don’t want that element to be wider. Is this an overflow issue?

Answer 1

Try changing message from “block” to “inline-block”. That appears to fix the positioning issue.

.field_with_errors .message { display:inline-block; white-space: nowrap; ... }

Block-level elements will break the flow (kind of like clearing a float), but inline-block will keep it in the flow of the element before it, while keeping the block-level properties.

To keep the message from wrapping, stop the element text from wrapping with the white-space: nowrap property.