1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    37
    Vote Rating
    0
    vladcd is on a distinguished road

      0  

    Post IE7 scroll problem

    IE7 scroll problem


    Hello everyone,

    I have a small problem regarding the display of scroll bars on IE7.
    The code for the test page is:

    Code:
    Ext.onReady(function(){
                var win = new Ext.Window({
                    width: 300, 
                    height : 300,
                    layout : 'fit',
                    items : [{
                        xtype : 'form',
                        layout : 'anchor',
                        items : [{
                            xtype : 'tabpanel',
                            anchor : '100% 100%',
                            bodyStyle : 'overflow:auto;',
                            enableTabScroll : true,
                            items : [{
                                title : 'Tab 1',
                                id : 'tab1'
                            }],
                            activeTab : 0
                        }]
                    }]
                });
                win.show();
            });
    After the window is displayed, I run from the Firebug Console(mozilla), or from the Script tab in Developer Tools(IE8), the following command:

    Code:
    Ext.getCmp('tab1').setHeight(500);
    In IE8 and Mozilla, the tab will be resized to 500px in height, and the horizontal/vertical scroll bars will appear.

    In IE7, the tab will be resized, but no scroll bars will appear. I don't know how much of an Ext problem this is, but considering you guys have extensive experience with browsers, I was hoping for a good hint for IE7.

    Thanks a lot,
    Vlad

  2. #2
    Ext User
    Join Date
    Apr 2009
    Posts
    37
    Vote Rating
    0
    vladcd is on a distinguished road

      0  

    Post additional info

    additional info


    I've noticed that after modifying the height to 500, the scroll does appear, but instead of being on the inside of the component with
    Code:
    overflow : auto;
    specified, it's on the outside of the overflowing component.

    For this, I've modified the width of the child of the component with
    Code:
    overflow : auto;
    from 284px to 265px. By doing this, the scroll will appear. However, it doesn't seem to function properly.

    Any thoughts are welcomed.

    Thanks a lot,
    Vlad

  3. #3
    Ext User
    Join Date
    Apr 2009
    Posts
    37
    Vote Rating
    0
    vladcd is on a distinguished road

      0  

    Post intermediate fix

    intermediate fix


    Hi,

    so after trying a ton of different stuff, I managed to find a patch. Apparently, if I override the position:relative for the body of the panel, the scroll will display correctly on IE7. However, this is not a solution for my complex layout (seems that some issues with floating objects appear), but I would appreciate any insight to why the position:relative is causing so much trouble on IE7.

    Code:
    <style type="text/css">
    .position-static{
        position : static !important;
        height : 500px !important;
    }
    </style>
    <script>
        Ext.onReady(function(){
                var win = new Ext.Window({
                    width: 300, 
                    height : 300,
                    layout : 'fit',
                    items : [{
                        xtype : 'form',
                        layout : 'anchor',
                        items : [{
                            xtype : 'tabpanel',
                            anchor : '100% 100%',
                            bodyStyle : 'overflow:auto;',
                            enableTabScroll : true,
                            items : [{
                                title : 'Tab 1',
                                id : 'tab1',
                                html : 'Lorem ipsum...very long text',
                                bodyCssClass : 'position-static'
                            }],
                            activeTab : 0
                        }]
                    }]
                });
                win.show();
            });
    </script>

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You've spent all this time overlooking a major point of the ExtJs layout system.

    You do not manage the size of child Components of size managing layouts. The parent Container's layout (In this case, CardLayout) does.

    You must not touch the size of "tab1". You must not make it position: static.

  5. #5
    Ext User
    Join Date
    Apr 2009
    Posts
    37
    Vote Rating
    0
    vladcd is on a distinguished road

      0  

    Post Why not?

    Why not?


    Well, I agree with not making the position static. It doesn't help me a lot anyway, but I needed some way to eliminate the position : relative bit, and overriding it with the default value was the first thing that came to my mind.

    About the height of tab1, I must say again this is a simplified example. In my code, I overrid the setSize of BoxComponent to take into account a minimum size. And this works very well in IE8 and Firefox, so I can't imagine why it shouldn't be the same in IE7.

    Sticking to the example, I think I'll probably lose some more time trying to figure this one out.

    In case I come up with something, I'll let you know.

    Thanks a lot for your feedback,
    Vlad

  6. #6
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @vladcd --
    Start with some basics before you get too involved with custom styling:
    Code:
    items : [{
       xtype : 'tabpanel',
       anchor : '100% 100%',
       bodyStyle : 'overflow:auto;',
       enableTabScroll : true,
       defaults: { autoScroll :true },
       items : [{
           title : 'Tab 1',
           id : 'tab1',
           html : 'Lorem ipsum...very long text'
       }],
       activeTab : 0
    }]
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  7. #7
    Ext User
    Join Date
    Apr 2009
    Posts
    37
    Vote Rating
    0
    vladcd is on a distinguished road

      0  

    Talking Solution

    Solution


    Thanks for all your feedback.

    I found the solution in the end.

    Code:
    Ext.onReady(function(){
        var win = new Ext.Window({
            width: 300, 
            height : 300,
            layout : 'fit',
            items : [{
                xtype : 'form',
                layout : 'anchor',
                items : [{
                    xtype : 'tabpanel',
                    anchor : '100% 100%',
                    enableTabScroll : true,
                    items : [{
                        title : 'Tab 1',
                        id : 'tab1',
                        autoScroll : true,
                        items : [{
                            xtype : 'panel',
                            html : 'Text',
                            height : 500
                        }]
                    }],
                    activeTab : 0
                }]
            }]
        });
        win.show();
    });
    Since the previous code seemed to lead nowhere, I just added an extra panel which is meant to do just that: provide the scroll bars and scroll the content correctly.

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar