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?

ptriek · Answer 1 · 2011-12-12T11:02:53.597

11

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

edited Dec 12 '11 at 11:02

answered Dec 12 '11 at 09:35

ptriek

9,040
5
31
29

it should work, it works when i test in firebug. however, i meant 'remove fixed space from scroller' (not wrapper) – ptriek Dec 12 '11 at 10:02
you mean to change remove width from `#scroller {width: 8520px}` which is `8250px` – Jitendra Vyas Dec 12 '11 at 10:57
I can't get this to work either, won't work unless I have the fixed width – Bruce van der Kooij Dec 21 '11 at 19:27
@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` – user850234 Jun 02 '12 at 08:06
The key may be the `float: left` on the scroller. Without it, Javascript can't properly determine the width. – daleyjem Sep 23 '14 at 15:41

score 2 · Answer 2 · answered Dec 03 '12 at 16:28

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

score 2 · Answer 3 · answered Jan 24 '12 at 09:24

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

score 1 · Answer 4 · answered May 23 '12 at 05:57

1

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

answered May 23 '12 at 05:57

user850234

3,373
15
49
83

score 0 · Answer 5 · answered May 12 '13 at 21:41

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

How to set dynamic width in iScroll for scroller?

5 Answers5