2

I've made a checklist (which I guess would be similar to a single column List-View with the LVS_EX_CHECKBOXES extended style in Windows) using a div and inserting checkboxes in it with JS and associated label each on their own line. Each line would look like this

<label for="cb" style="white-space: nowrap;">Label<input type="checkbox" id="cb" /></label>

I've set the width of the div to be auto so it automatically resizes based on the content and made sure the labels don't wrap on white spaces but that cause the div width to be smaller than the content forcing a horizontal scroll bar to appear.

Here's an example of the HTML code produced by the JS as reported by Firebug:

<div class="employees_list_column"> <div id="employees" class="check_list_wx" style="height: 130px; width: auto;"> <label style="white-space: nowrap" for="checklistwx_employees_35"> <input id="checklistwx_employees_35" type="checkbox" name="checklistwx_employees_35">E*** I***** </label> <br/> <label style="white-space: nowrap" for="checklistwx_employees_45"> <input id="checklistwx_employees_45" type="checkbox" name="checklistwx_employees_45">F*** P***** </label> <br/> <label style="white-space: nowrap" for="checklistwx_employees_34"> <input id="checklistwx_employees_34" type="checkbox" name="checklistwx_employees_34">J******* C*** </label> <br/> <label style="white-space: nowrap" for="checklistwx_employees_37"> <input id="checklistwx_employees_37" type="checkbox" name="checklistwx_employees_37">J****** M***** </label> <br/> <label style="white-space: nowrap" for="checklistwx_employees_1"> <input id="checklistwx_employees_1" type="checkbox" name="checklistwx_employees_1">L**** M*********** </label> <br/> <label style="white-space: nowrap" for="checklistwx_employees_2"> <input id="checklistwx_employees_2" type="checkbox" name="checklistwx_employees_2">M****** F******* </label> <br/> <label style="white-space: nowrap" for="checklistwx_employees_3"> <input id="checklistwx_employees_3" type="checkbox" name="checklistwx_employees_3">N*** A******* </label> <br/> <label style="white-space: nowrap" for="checklistwx_employees_4"> <input id="checklistwx_employees_4" type="checkbox" name="checklistwx_employees_4">O****** P******* </label> <br/> <label style="white-space: nowrap" for="checklistwx_employees_5"> <input id="checklistwx_employees_5" type="checkbox" name="checklistwx_employees_5">P*** T****** </label> <br/> </div> </div>

And the CSS:

element.style { height: 230px; width: auto; } .check_list_wx { border: 1px solid #BBBBBB; margin: 10px; overflow: auto; } .employees_list_column { float: left; line-height: 24px; }

Any ideas why the width of my div is smaller than the content?

Improve this question

3 Answers 3

Reset to default
2

You have a typo in your CSS. check_list_wx is being treated as a DOM node type instead of a class reference because it is missing the preceding .. Since it never gets the display:inline-block; assignment, it continues to be treated as a block element and takes up the full width of the parent.

Change 

check_list_wx { border: 1px solid #BBBBBB; display: inline-block; overflow: auto; }

to 

.check_list_wx { border: 1px solid #BBBBBB; display: inline-block; overflow: auto; }

http://jsfiddle.net/AlienWebguy/zMQey/

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

With all of those thousands of +1 that this answer has gotten. I feel i should inform that older versions of ie ( ie 6 & 7 ) will not like this. Though i do feel like giving plus just for the avatar... ;)
Dux my man! Yea ie6 will bail. IE7 should be ok. Besides, even M$ is ditching IE6 - ie6countdown.com
Well, netrenderer says ie 7 shows the width as 100% would show it basically. Yea i love that ms is ditching it plus.. I live in finland so at work i dont quite have to worry about ie6. Though, personally i stopped caring about it long ago.
My bad, missed the . when I copied from firebug.
1

width: auto; does not mean that your div will automatically resize based on the content. It means that it automatically takes the width of its parent element. width: auto; is also the default width of a div.

Below is a simplified working sample. Notice the overflow-x: hidden; and padding: 0 16px 0 0; on the check box list. This makes sure that there will be no horizontal scrollbar and that no content will be hidden at the right edge.

<!doctype html> <html><head> <title>Check box list with vertical scrollbar</title> <style type="text/css"> .checkBoxList { border: 1px solid #BBBBBB; height: 130px; float: left; line-height: 24px; padding: 0 16px 0 0; overflow: auto; overflow-x: hidden; } .checkBoxList label { display: block; white-space: nowrap; letter-spacing: 5px; } </style> </head><body> <div class="checkBoxList"> <label for="cb1"><input id="cb1" type="checkbox"/>Check box 1</label> <label for="cb2"><input id="cb2" type="checkbox"/>Check box 2</label> <label for="cb3"><input id="cb3" type="checkbox"/>Check box 3</label> <label for="cb4"><input id="cb4" type="checkbox"/>Check box 4</label> <label for="cb5"><input id="cb5" type="checkbox"/>Check box 5</label> <label for="cb6"><input id="cb6" type="checkbox"/>Check box 6</label> <label for="cb7"><input id="cb7" type="checkbox"/>Check box 7</label> <label for="cb8"><input id="cb8" type="checkbox"/>Check box 8</label> <label for="cb9"><input id="cb9" type="checkbox"/>Check box 9</label> </div> </body></html>

You can find more information about the CSS overflow property here: http://css-tricks.com/2833-the-css-overflow-property/.

Improve this answer

7 Comments

-1 for telling her she needs to increase her parent element width. +1 for explaining that width:auto; is being used incorrectly.
@AlienWebguy I removed the part about increasing the width of the parent. I also did your suggested CSS adjustment, but I can't see any problems. Do you get the scrollbar?
No scrollbar on my fiddle on Chrome at least.
Oopsie, didn't know that. What would the best way to automatically size an element based on it's content (without JS of course)? The answer below is suggesting using float: left but it feels a bit like a dirty fix to me since I'm going to have to clear it with another div after. :S
I'm not sure what your problem is anymore, can you please clarify your question? I thought it was about getting rid of the scrollbar, but when I try your example I don't get any scrollbar.
|
0

float: left; is the thing that you can use if you want the outer element to wrap around the content.

Edit: http://jsfiddle.net/hdxdw/

Improve this answer

8 Comments

Is that the only solution? It feels like a dirty fix to me since I'm going to have to clear it with another div after.
I'm not quite sure why it would be dirty. Anyways i added example to my answer.
Thanks for the example. There is a few things I don't understand though about it. I've play a bit with the code but I don't understand what setting both float: left and clear: both on the same div does. Also, in the CSS I see clear: both and the element has clear: none. To me it seems clear: both does nothing but I thought I'd ask in case this was some kind of trick.
In this case float: left; is not used to just float the object to the left, it's just a side effect. Float more or less establishes the real width and height of the content and sizes the element accordingly. float: right; does quite same thing but.. it floats to the right. clear: both; is put to the element so that it says to any floated elements to buzz off if theyre in its left or right. So clearis used to kind of undo what float does. That one clear: none; was maybe too confusing. but i set that because it was easier for me. Not having clear: both;in element does the same thing.
Heres without clear: both; jsfiddle.net/hdxdw/6 Heres with clear: both; jsfiddle.net/hdxdw/5 - Note that as you have set a height value to the element the height is what you have set it to. same applies to width float: left; respects those values that you put but if you dont have any it wraps the element around the content.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.