how to set horizontal scroll for div such that when adding items by jQuery

Question

I am appending check-boxes in a div by jQuery. Div is scroll when overflow. But I see that when checkbox names are large then div does not horizontally scroll but extra content goes to next line while vertical scroll works fine . below is some code

below is code of div creation

  <div id="legendBox" style="overflow:scroll;width:145px;height:300px;"></div>

This code is to add check boxes in DIV

if (legendChecked == "T")
                {
                    legendtest = "<input type='checkbox' class='" + legendClass + "' name='" + legendName + "' style='background-color:" + legendColor + "' value='" + legendName + "' checked onClick=legendChanged();  title='" + legendName + "' />" + legendName;
                } else
                {
                    legendtest = "<input type='checkbox' class='" + legendClass + "' name='" + legendName + "' style='background-color:" + legendColor + "' value='" + legendName + "' onClick=legendChanged();  title='" + legendName + "' />" + legendName;
                }
                $("#legendBox").append(legendtest+"</br>");

Please tell me where is mistake.

Joris Lindhout · Accepted Answer · 2013-09-11 14:45:46Z

0

Or add display:inline: http://jsfiddle.net/eq3r9/

Edit: This is a better solution: http://jsfiddle.net/eq3r9/1/

edited Sep 11, 2013 at 14:45

answered Sep 11, 2013 at 14:26

Joris Lindhout

2052 silver badges9 bronze badges

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

2 Comments

agarwal_achhnera Over a year ago

check the second fiddle by placing <br> after each check box and placing a space in lagend name, then reduce the display area such that horizontal scroll show. You will see that legend name after space goes to next line

Joris Lindhout Over a year ago

Not sure if I totally get what you mean, but: http://jsfiddle.net/eq3r9/2/

Collectives™ on Stack Overflow

how to set horizontal scroll for div such that when adding items by jQuery

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related