In this example width of wrapper of all elements is fixed 8520px

#scroller {
width: 8520px;
height: 100%;
float: left;
padding: 0;}

I want width dynamic so if i add more elements inside <div id="scroller"> this #scroller should take the width upon elements inside it.

So tried to set width

#scroller {
    width: 100%;}

and

 #scroller {
    width: auto}

but then scroller doesn't work properly.

is there a way to get width in % with properly working scroll?

In this example http://bit.ly/t2ImYS width of wrapper of all elements is fixed 8520px

#scroller {
width: 8520px;
height: 100%;
float: left;
padding: 0;}

I want width dynamic so if i add more elements inside <div id="scroller"> this #scroller should take the width upon elements inside it.

So tried to set width

#scroller {
    width: 100%;}

and

 #scroller {
    width: auto}

but then scroller doesn't work properly.

is there a way to get width in % with properly working scroll?

• javascript
• css
• mobile-safari
• iscroll4

5 Answers 5

• Set the li elements to display:inline-block; and remove the float:left; (you could also remove the vertical-align, since that will only work on table-cell elements)

• Remove the fixed width from the wrapper.

• Add white-space:nowrap; to the ul

• And you should be fine...

(Except in <=ie7, but I suppose that's no problem in your case?)

#scroller li {
    display: inline-block;/* changed */
    /*float:left; */   /* deleted */
    padding: 0 10px;
    width: 120px;
    height: 100%;
    border-left: 1px solid #CCC;
    border-right: 1px solid white;
    background-color: #FAFAFA;
    font-size: 14px;
}
#scroller ul {
    list-style: none;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    text-align: left;
    white-space:nowrap; /* added */
}
#scroller {
    /* width: 8520px; */   /* deleted */
    height: 100%;
    float: left;
    padding: 0;
}

If you are using iScroll4 you should refresh the scroller or destroy and recreate it.

Excerpt from here: "iScroll needs to know the correct dimensions of both the wrapper and the scroller. They are computed the first time at start up but if your code changes the elements size, iScroll needs to be warned that you are messing with the DOM."

Using Display:inline-block and using percentages worked for me:

#scroller li {
 height: 100%;
 width: 2%;
 display: inline-block;
}

#scroller ul {
 list-style: none;
 display: block;
 float: left;
 width: 100%;
 height: 100%;
}

#scroller {
 width: 5000%;
 height: 100%;
 float: left;
}

Try calling the iscroll refresh() method after adding dynamic items within the scroller to set the width.

try this css code, it worked for me: http://jsfiddle.net/manseuk/r9VL2/2/

#wrapper {
                 z-index:1;

                width:100%;
                background:#aaa;
                overflow:auto;
            }

            #scroller {
               z-index:1;
            /*    -webkit-touch-callout:none;*/
                -webkit-tap-highlight-color:rgba(0,0,0,0);
                width:100%;
                padding:0;
            }

            #scroller ul {
                list-style:none;
                padding:0;
                margin:0;
                width:100%;
                text-align:left;
            }

            #scroller li 
            {
                background-color: White !important;
                padding:0 10px;
                height:40px;
                line-height:40px;
                border-bottom:1px solid #ccc;
                border-top:1px solid #fff;
                background-color:#fafafa;
                font-size:14px;
            }