Results 1 to 4 of 4

Thread: CSS3 Multi-Column feature with scrollTo function does not appear to work

  1. #1

    Default CSS3 Multi-Column feature with scrollTo function does not appear to work

    I'm implementing an eBook type reader that can take any arbitrary length of html content and format it into pages that are formatted for horizontal display (using CSS3 multi-column feature).

    Here is a quick code block creating the panel and adding the article (html content) to the panel. As you can see I wrap the articlePages (which is the html content) in a <div> block that performs the CSS3 multi-column formatting.

                            id: "ArticlePagePanel",
                            xtype: 'panel',
                            layoutOnOrientationChange: true,
                            scroll: 'horizontal',
                            // I set the panel to 10000px wide manually. 
                            html: '<div style="height: 450px; -webkit-box-shadow: 5px 5px 7px #888; -webkit-column-rule: 2px solid gray; -webkit-border-top-left-radius: 15px; padding:10px; width: 10000px; column-fill: auto; column-count: auto; -webkit-column-count: auto; -webkit-column-gap: 30px; -webkit-column-width: 290px; column-width: 290px;">'+articlePages+'</div>',
                                afterrender: function() {
    This works great... the columns are formatted to the width of the device plus some column gaps to space the pages.

    Now, I want to add button or gestures to navigate horizontally thru the pages. I added scrollTo calls to some button handlers, but the page will not move, will not scroll to my requested position.

    The user can manually drag his finger and scroll the content, so the scroller is there and operational. I just need to know how to scroll the content.

    Here is what I'm using, but does not work:

        Ext.getCmp('ArticlePagePanel').body.scrollTo(2000, 0);  // tried many variations, nothing works

    PS: Here is the CSS3 W3C link

    Any help would be greatly appreciated.


  2. #2


    Would anyone know how to debug this? I'm really stumped why this does not work. I set the width of the panel to 10000px, the multi-column style works well, and I can manually scroll horizontally... for some reason I cannot programmatically scroll the content... anyone have any ideas? or how to debug this?

  3. #3


    Okay, I did finally get the scrollTo working... I did not know that the x and y positions had to be explicitly set.

    Ext.getCmp('ArticlePagePanel').scroller.scrollTo({x: 800, y: 0}, true);
    It's also slow on the iPhone, not so bad on the iPad.

    Anyone know how to calculate the needed panel width. The multi-column style will format your HTML into whatever number of columns you want, but you HAVE to specify a width for the panel... if you want to see all the content. Right now, the html is arbitrary length, so I do not know how wide I need to set the panel ahead of time.

  4. #4


    I'm feeling alone here... but I wanted to add my fix just in case someone else needs this information.

    The scrolling was super slow and choppy until I made a slight change to multi-column options (I removed the panel width, as it will automatically set the width). My initial testing of this css3 feature it did not auto set the panel width, it does now.

    Here is the working code block, where "art" is 20 pages of an HTML article. I wrap it in this multi-column div and it formats the entire content, images and everything.

                        id: 'articleContent',
                        xtype: 'panel',
                        scroll: 'horizontal',
                        html: '<div style="height: 450px; -webkit-box-shadow: 5px 5px 7px #888; -webkit-column-rule: 2px solid gray; -webkit-border-top-left-radius: 15px; padding:10px; column-fill: auto; -webkit-column-count: auto; column-count: auto; -webkit-column-gap: 30px; -webkit-column-width: 290px; column-width: 290px;">'+art+'</div>',
    // Then use these controls to navigate the content in your button handler code
    var pan = Ext.getCmp('articleContent');            
    var ypos = pan.scroller.getOffset().y
    var xpos = pan.scroller.getOffset().x
    // nextpage (of 320 pixels or whatever you need)
    pan.scroller.scrollTo({x: xpos+=320, y: ypos}, true);
    // previous page
    pan.scroller.scrollTo({x: xpos-=320, y: ypos}, true);

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts