1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    JRRB is on a distinguished road

      0  

    Default Unanswered: Scrollable direction both not working

    Unanswered: Scrollable direction both not working


    I have a panel that loads some HTML. Until I figure out how to scale properly for different devices, I want to enable scrolling in both horizontal and vertical directions. I'm getting some very odd behavior (testing in Chrome on Win7):

    'auto' & 'vertical': both scroll vertically mostly correctly, but if you keep pulling down, it seems to make the viewport smaller & begins to cut off the content

    'horizontal': can't scroll vertically anymore, and scrolling horizontally doesn't work; it always bounces back to the left side.

    'both': combination of 'vertical' and 'horizontal' behavior. Can scroll vertically, but attempting to scroll horizontally doesn't work (as described above).

    The content I'm loading into my panel:

    PHP Code:
     var panel Ext.create('Ext.Panel', {
                
    type'vbox',
                
    align'default',
                
    scrollable: {
                    
    direction'horizontal'
                
    },
                
    html: [
                    
    "<a name=\"top\"></a>",
                    
    "<div id=\"vertical\"></div>",
                    
    "<div id=\"wrapper\" class=\"title_page\">",
                     ...
                    
    "</div>",
                    
    "<a name=\"abs_bottom\"></a>"
                
    ].join("")
            });

            
    Ext.Viewport.add(panel); 
    Chrome reports the computed style on "wrapper" as:

    PHP Code:
    -webkit-tap-highlight-colorrgba(0000);
    -
    webkit-user-dragnone;
    -
    webkit-user-selectnone;
    background-colortransparent;
    background-imagenone;
    clearboth;
    color#464547;
    displayblock;
    font-familyArialsans-serif;
    font-size18px;
    font-weightbold;
    height720px;
    margin-bottom0px;
    margin-left0px;
    margin-right0px;
    margin-top0px;
    min-height0px;
    min-width0px;
    overflow-xvisible;
    overflow-yvisible;
    padding-bottom0px;
    padding-left0px;
    padding-right0px;
    padding-top0px;
    position: static;
    width1024px
    As you can see, I have height & width set explicitly. Any ideas how to get this to work properly?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Working for me:

    Code:
    var panel = Ext.create('Ext.Panel', {
        scrollable : {
            direction : 'both'
        },
        width      : 400,
        height     : 400,
        items      : [
            {
                html   : 'wide component',
                width  : 600,
                height : 200
            },
            {
                html   : 'tall component',
                height : 600
            }
        ]
    });
    
    Ext.Viewport.add(panel);
    Removed the type and align configs as they are not valid configs of Ext.Panel.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Aug 2012
    Posts
    2
    Vote Rating
    0
    JRRB is on a distinguished road

      0  

    Default


    Thanks for replying.

    Is it required to have a width and height set in the config in order for scrolling to work? Or can I set the same dimensions in CSS and have it still work properly?

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,547
    Vote Rating
    872
    Answers
    3566
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    html can overflow the panel but one way or another the body needs to be wider than the component. I used static sizing to demonstrate that it does work.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread