Results 1 to 4 of 4

Thread: Scroll position lost when Box layout updates

    Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7869 in 5.1.3.
  1. #1
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    NJ, USA

    Default Scroll position lost when Box layout updates

    Ext version tested:
    • Ext 4.1.1
    Browser versions tested against:
    • Chrome 22
    • IE 8
    • FF 15
    DOCTYPE tested against:
    • html
    • When a Box layout updates, the scroll position of its owner container is lost.
    Steps to reproduce the problem:
    The result that was expected:
    • The scroll position of the outer panel should remain in place
    The result that occurs instead:
    • The scroll position of the outer panel is reset to the top
    Test Case:
    Ext.onReady( function() {
        function createAccordionPanels() {
            var panels = [];
            for( var i = 0; i < 25; i++ ) {
                var panel = Ext.create( 'Ext.panel.Panel', {
                    title       : "Panel " + i,
                    bodyPadding : 10,
                    html        : "Test content " + i
                } );
                panels.push( panel );
            return panels;
        function createContent() {
            var str = "";
            for( var i = 0; i <= 50; i++ ) 
                str += i + "<br>";
            return str;
        var containerPanel = Ext.create( 'Ext.panel.Panel', {
            renderTo: Ext.getBody(),
            height : 300,
            overflowY: 'auto',
            layout: 'hbox',
            items: [
                    width  : 200,
                    layout : 'accordion',
                    items  : createAccordionPanels()
                    flex  : 1,
                    xtype : 'component',
                    html  : createContent()
        } );
    } );

    See this URL for live test case:

    Cause of problem:
    • ?I traced the cause of the problem to the Box layout's beginLayout() method.
    beginLayout: function (ownerContext) {
        var me = this,
            smp = me.owner.stretchMaxPartner,
            style =,
            names = me.getNames();
        // Don't allow sizes burned on to the innerCt to influence measurements.
        style.width = '';
        style.height = '';
    (In the context of my fiddle example)
    1. When the line in red executes, there is no longer any height on the innerCt element (it effectively becomes 0, due to the absolutely positioned child targetEl). So its parent element's scrollTop gets reset to 0, because it no longer has any content to scroll.
    2. The layout routine continues, sizes everything up, and eventually re-applies the new height to the innerCt element. This causes the scrollbar to re-appear. But, because the scrollTop was already reset to 0, we're left back at the top of the panel.

    Possible Fix:

    It seems that simply commenting out that line in red, or removing it in an override fixes the problem. However, I don't know what else this might be breaking in the process, as I'm sure it was originally there for a reason.

    I thought perhaps that commenting out the line would prevent the shrink wrapping feature from re-collapsing the height of the element once it had lost some content, but apparently this is not the case. Check out this slightly more complex version of the original fiddle, which generates a random amount of new content when the accordion panels are expanded and the layout is refreshed: It shows that the auto-shrinking feature still seems to work.

    Additional CSS used:

    • only default ext-all.css
    Operating System:
    • Win7

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    Thanks for the report! I have opened a bug in our bug tracker.

  3. #3
    Ext JS Premium Member Gjslick's Avatar
    Join Date
    Feb 2009
    NJ, USA


    Thanks Mitchell.

  4. #4
    Sencha User
    Join Date
    Nov 2008
    Lyon, France


    + one for having a look at this bug.

    When you have complex forms within box and with scrollbar, it makes your form jump on any field updates - quite annoying.

    Thanks for the proposed fix, it works in my case.

    Quite glad I found this post !

Posting Permissions

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