Pagination adds gaps between panes and a blank page at the end

[ghost]

I'm using ftscroller to write a small app that has several vertical scrollers inside a horizontal one and its not paginating the content correctly. The problem is that when I move to a higher number page part of the previous one is still visible on the left, it seems like the scroller is not assigning the pages the correct width, although it assigns the total width of all the pages correctly. You can check this behavior on your paginated demo code, just add some more pages and you will see it.

Thanks

[matthew-andrews]

Hi, thanks for your report. I've just tried to follow your steps using Chrome 24 but haven't been able to reproduce the issue you described.

Would you be able to provide a test case (a link to a page that demonstrates this problem should be good enough) and tell me a little more about the browsers you are experiencing this problem on?

Thanks again.

[ghost]

Of course, I uploaded a small test page here http://marinacostabonita.com/webapp/ . I have looked at it on firefox 18, chrome 24 and safari 5 on OS X, an ipad 2 and an android 4.0 tablet and I have the issue. If you go ahead and scroll to say page 6 on the test page I attached here you will see that it has a bright green background and on the left margin you can see a part of dark green that belongs to page 5 as well as the gap between them.

Thanks

[matthew-andrews]

Thanks! I think you are running into this issue:- http://css-tricks.com/fighting-the-space-between-inline-block-elements/

If you can remove the white-space (including HTML comments, I think(?)) between each <section /> element in the source code then this will be fixed. Otherwise the post above has other suggestions for alternative ways to fix it.

[ghost]

Great! I'll try that and will read the post.

Thanks again

[ghost]

ALso, did you notice that when you try and scroll past page 9 you actually get another page with a lot of page 9 displayed to the left? would this be the same issue?

[matthew-andrews]

I'm not sure, does the fix fix it?

[matthew-andrews]

Actually I just spotted this in some comments of the source code of one of our examples:-

/* Style each 'page' to be the same size and join together into a long horizontal strip.
   Use display: table on the section wrapper to get rid of whitespace between the inline-blocks. */

So instead of removing whitespace you can just display: table the element that has the <section /> elements in.

[ghost]

Well, floating the section elements does the trick. It now works like a charm!!! Thanks SO much for your help. Now on to fill the app with content.

Thanks again

[ghost]

And I'll take note of the display:table trick too just in case

[matthew-andrews]

I think the display: table trick is probably the more robust option. I would recommend that.

[ghost]

Ok, I'll take a look at it. It's up on my test site if you want to check it out.

Thanks

[matthew-andrews]

Your horizontalScroller element is too wide, it is 5000px. It should be 4500px (9 panes multiplied by 500 pixels per pane is 4500).

But other than that - looking good!

[ghost]

Ops. And I thought I was good at math. I completely overlooked that.

[matthew-andrews]

Would you mind if I closed this issue then? It looks like FT Scroller was working properly all along ;-)

[ghost]

Yes it was. I'm sorry to have taken your time. I really appreciate your help and yes, please close this issue. Thanks

[matthew-andrews]

No worries - I've tweaked the issue title a little so hopefully if there are other people running into this problem in the future hopefully they will be able to find this solution.

[rowanbeentje]

This is definitely a tricky one - as the comment shows, we ran into this when making the example as well. The Scroller paginates content at its own width by default, so if the content is 100% width and then also margin/a gap, there's issues. The only real way we could work around with is some kind of detection of boundaries of content within the scroller, which is an interesting idea (if probably a bit expensive to compute...)

[matthew-andrews]

Alternatively scroller could hide / strip out / otherwise suppress the affect of the empty textNodes?

[rowanbeentje]

I think amending the behaviour of the textNodes would either require editing the content or applying CSS changes within the scroller, which seems like it could have dangerous side-effects unless we do a lot of parsing to identify specific issues :/