If you're anything like me, it bothers you when things don't line up. I don't know what it is, maybe low-grade undiagnosed OCD, but even if it didn't bother me, I imagine that it would bother some of my users. One of the first OCD issues that I had come across after starting with the iForms happened when I'd have a simple order with a checkbox followed by a long string of text. The text would wrap to the next line and interrupt what had previously been a nice consistent straight line of checkboxes.
A couple CSS elements will do the trick when used together:
.hangingIndent {
text-indent: -24px;
padding-left: 24px;
}
When you use a negative text-indent and a positive padding, you create what is called a "hanging indent." This is basically the opposite of paragraph indentation, where the first line is indented in. With a hanging indent, the first row is to the left of the rest of the paragraph.
So when used in this context, the checkbox, being on the first line, is farther to the left than the rest of the lines in the paragraph. If the text doesn't spill over to a second line, nothing special happens. But if the text does wrap, it doesn't mess around with those gaps between your checkboxes; it indents those additional lines over to the right.
The only caveat I have to give with this method is that you have to be a little more structured with your HTML. If your checkboxes are in their own cells of a table or in their own paragraphs, you should be fine. If you separate your textboxes using <br /> tags, it will interpret those line breaks as part of the same paragraph and may indent all but the first line of the section (including the additional checkboxes).
Feel free to play with the concept at jsFiddle
0 comments: