Pagination adds gaps between panes and a blank page at the end about ftscroller HOT 19 OPEN

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.

from ftscroller.

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

from ftscroller.

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.

from ftscroller.

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

Thanks again

from ftscroller.

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?

from ftscroller.

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

from ftscroller.

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.

from ftscroller.

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

from ftscroller.

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

from ftscroller.

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

from ftscroller.

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

Thanks

from ftscroller.

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!

from ftscroller.

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

from ftscroller.

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

from ftscroller.

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

from ftscroller.

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.

from ftscroller.

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

from ftscroller.

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

from ftscroller.

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 :/

from ftscroller.