Dynamic loaded list not stay above tabbar

[barts2108]

I have an application that loads lists of items dynamically. With the dynamic loaded lists I have the issue that he last button will not stay above the tabbar when the list is scrolled down.

I have created a testcase where you can see the behaviour at:

http://www.maakmenietgek.com/test2/

The entire code you can get in this zip:

http://www.maakmenietgek.com/test2.zip

Inside the dynamicpage.html file I have a chunk of html that is inserted in the mainpage. At the end of this dynamicpage I added a script tag with jQT.init_iScroll() to get the scroll working for the newly loaded data. Probably there are better ways to do this, but I could not get it to work.

Test1: Click "Static List" and scroll all the way down. The entire Item 20 button will be above the tabbar

Test2: At the home page click "Dynamic List". Scroll down in that list and see that the Item 20 button stay partly behind the tabbar.

I can't find a reason why this happens. Is this a but in the calculations for the scrollwrapper/pane ?

[DataZombies]

See jqt.bars.js Change Log and look for "To add iScroll to AJAX loaded pages use this at the bottom of the file..."

[barts2108]

I have added this tested it, added to the testcase, and unfortunately I must say..

doesn't work for me.

It does add the scroll to the AJAX loaded page, but scrolling to the bottom in the dynamic list still shows the last item 35% behind the tabbar.

edit: I have tested the demo. That works. I replaced the div class="info" in your example with my ul li a list, and scrolling to the bottom does not work correctly anymore as the last ul li a list item is partly behind the tabbar

am I doing something wrong? or is the behaviour for ul li a lists different compared to class info for scrolling to the bottom ?

[barts2108]

I have added some colors in my test (also in the testcase). scrollwrapper is blue, scrollpane is green. I reduced the number of buttons to 10 as it makes scrolling down easier.

With the colors I see a difference between the dynamic list and static list. The static list has green color on left, bottom and right. The dynamic list has green color only on the left and right. With the webinspector I see difference in values for the s-scrollpanes

-webkit-transform: matrix(1,0,0,1,0, .. static -559, dynamic -540 hight: static 869px, dynamic 852px -webkit-transform: translate3d(0px static -559 , dynamic -540

It looks like there is a problem with calculations for dynamic loadad pages.

[barts2108]

Have traced this back being caused by the following:

in initTabbar about the 10th line a padding of 1px is added to .s-scrollpane. If I remove that line and add it to the init_scroll function inside the $page.each. My next try was to remove this line completely and add this padding to the css file. then it simply works.

Is this extra css meant to be inside initTabbar ? Isn't it better to move this styling to the css file ?

PS: I did not update this in the testcase so that you can see the difference. PPS: If indeed this styling is better moved to the css file, how about the scrollwrapper css around line 165 ?