How to set dynamic width in iScroll for scroller?

Question

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?

Answer 1

• 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;
}