CODEWITHSUNDEEP
jquerypopupjquery-dialog
jem
jem

Reputation: 51

Jquery dialogue box horizontal scrollbar issue

I want all the child div should be left align with horizontal scroll bar. But in the jsfiddle(http://jsfiddle.net/PrZNr/95/) the child divs are not left align ,it is only aligned left when the parent div width is increased. 

<div id="items" style="width:700px;height:500;overflow:scroll">
    <div style="float:left;">
    <ul class="sort">
        <li >Item  A1sdfsdfsdfsdfsdfsdfyynynynyn</li>
        <li>Item A2</li>
        <li>Item A3</li>
        <li>Item A4</li>
        <li>Item A5</li>
        <li>Item A6</li>
        <li>Item A7</li>
        <li>Item A8</li>
        <li>Item A9</li>
        <li>Item A10</li>
    </ul>
</div>
    <div style="float:left;">
    <ul class="sort">
        <li >Item  A1sdfsdfsdfsdfsdfsdfyynynynyn</li>
        <li>Item A2</li>
        <li>Item A3</li>
        <li>Item A4</li>
        <li>Item A5</li>
        <li>Item A6</li>
        <li>Item A7</li>
        <li>Item A8</li>
        <li>Item A9</li>
        <li>Item A10</li>
    </ul>
</div>
</div>

But i want the parent div width should be 100 px and all the child div should left align and horizontal scroll bar should be there in the dialogue pop up window

Upvotes: 1

Views: 905

Answers (2)

spring
spring

Reputation: 770

Here is the working Demo http://jsfiddle.net/PRNBg/

  • I have have added another Div as a container of inline elements inside the outer div (see the demo)
  • removed style attribute id="item" div

  • changed css 

    #items{  
  width:700px;  
  overflow-x:scroll;
  white-space: nowrap;
  background:#eee;
 }
#items div, ul
{
  display:inline-block;    
  float:left;
}

Upvotes: 1

bouscher
bouscher

Reputation: 1360

One possibility would be to wrap the two child divs in another div, which has a width, which has at least the width of the two children together. This will grant the elements enough room to float horizontally next to each other.

See my modified fiddle of yours: http://jsfiddle.net/E8f86/

<div id="items" style="width:100px;height:500;overflow-x:scroll">
<div style="width:700px">
<div style="float:left;background:#efefef">
<ul class="sort">
    <li >Item  A1sdfsdfsdfsdfsdfsdfyynynynyn</li>
    <li>Item A2</li>
    <li>Item A3</li>
    <li>Item A4</li>
    <li>Item A5</li>
    <li>Item A6</li>
    <li>Item A7</li>
    <li>Item A8</li>
    <li>Item A9</li>
    <li>Item A10</li>
 </ul>
</div>
<div style="float:left;background:#ff00ff">
<ul class="sort">
    <li >Item  A1sdfsdfsdfsdfsdfsdfyynynynyn</li>
    <li>Item A2</li>
    <li>Item A3</li>
    <li>Item A4</li>
    <li>Item A5</li>
    <li>Item A6</li>
    <li>Item A7</li>
    <li>Item A8</li>
    <li>Item A9</li>
    <li>Item A10</li>
</ul>
</div>
</div>
</div>

Upvotes: 1

Related Questions