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?

Tableau

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

Spiffing

it should work, it works when i test in firebug. however, i meant 'remove fixed space from scroller' (not wrapper) – Spiffing

you mean to change remove width from #scroller {width: 8520px} which is 8250px – Tableau

I can't get this to work either, won't work unless I have the fixed width – Eavesdrop

@tcurdt : You need to calculate the width after your content is loaded. You can do this by $('.content').length*$('.content').width(). This will set the width according to the number of items and fixed width issue will also be solved. But you need to set width otherwise iscroll will not work. This method helps you to set width while doing dynamic change in content within iscroll – Crin

The key may be the float: left on the scroller. Without it, Javascript can't properly determine the width. – Monaghan

Answer 2

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."

Florencio

Answer 3

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

Herodias

Answer 4

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

Crin

Answer 5

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

Inharmonious