0

I'm having issues with some UI that displays two spans, each with a bunch of checkboxes. The HTML looks like:

<strong>Areas Impacted</strong>
<div class="arealist">
  <span class="group"><label><input type="checkbox" />Select All</label></span>
  <span class="areas">
    <label><input type="checkbox" />Item 1</label>
    <label><input type="checkbox" />Item 2</label>
    <label><input type="checkbox" />Item 3</label>
    <label><input type="checkbox" />Item 4</label>
    <label><input type="checkbox" />Item 5</label>
    <label><input type="checkbox" />Item 6</label>
    <label><input type="checkbox" />Item 7</label>
  </span>
</div>

And I have the following CSS:

div.arealist { display: block; clear: both; margin-top: 40px; }
div.arealist>span { display: inline; padding: 25px; }
div.arealist>span label { display: inline; }
div.arealist>span.group { width: 75px; border: 1px solid #d0d0d0; }
div.arealist>span.areas { width: 300px; border: 1px solid #d0d0d0; }

It looks like so:

enter image description here

There's two issues with this. First, the checkboxes on the right side bleed over into the left box, along with the border as well. The Select All text should be in its own span, and the list of items would all be in the right box. The second issue is the Item 4 checkbox gets broken up into two lines. I want to treat a <label> tag as a single unit, never to span across multiple lines.

Fiddle Sample

What am I doing wrong?

5
  • 1
    Looks fine in jsfiddle for me, which browser(s) you getting this in ?
    – Mark
    Jan 24, 2013 at 23:26
  • try to do exactly what you did on the fiddle because it looks fine there. you probably have some conflicting css
    – Ibu
    Jan 24, 2013 at 23:27
  • I tried in IE8 and Firefox. Jan 24, 2013 at 23:28
  • Same problem on Chrome/Mac as well. Jan 24, 2013 at 23:29
  • Oh, you might have to shrink your browser window down a bit for the labels to start wrapping. Jan 24, 2013 at 23:30

1 Answer 1

2

As far as I can tell, both of your problems arise from putting your content in inline elements. When the browser gets too small to hold the content of both <span> across the width, the content in the second span simply wraps around to the next line, the way it would if all of the elements inside those <span> were just on one straight line. You can visualize this effect with the border around to your span elements.

The second problem is the same deal - the browser is treating each label item as just a line of text, so if the browser window isn't large enough, it'll wrap around to the next line regardless of where one label starts and another begins.

Just change both of those to inline-blocks and you're fine:

div.arealist>span { display: inline-block; padding: 25px; }
div.arealist>span label { display: inline-block; }

(Of course, now your elements inside each <span> are wrapping to two lines because now the inline-block elements are actually obeying the width settings you gave them, so you'll have to fiddle with that a bit.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.