1. #1
    Ext User
    Join Date
    Mar 2008
    Location
    Punjab, INDIA
    Posts
    6
    Vote Rating
    0
    amanbrar82 is on a distinguished road

      0  

    Default tabs hide under a bar when resizing east panel in Safari

    tabs hide under a bar when resizing east panel in Safari


    hi, i'm having a problem with the tab panel in East region in Complex Layout. when many tabs are added to tabpanel and enableTabScroll: true, when we resize the panel, some tabs appear as hidden under a bar that appears on top of tabs as shown in the picture attached. It happens only in Safari, In Firefox and IE there is no problem.
    Can anybody tell me something about this problem.
    Thanks in advance.
    Code:
        Ext.onReady(function(){
           var viewport = new Ext.Viewport({
                layout:'border',
                items:[
                    new Ext.BoxComponent({ // raw
                        region:'north',
                        el: 'north',
                        height:100,
    				}),{
                        region:'south',
                        contentEl: 'south',
                        split:true,
                        height: 100,
                        minSize: 100,
                        maxSize: 200,
                        collapsible: true,
                        title:'South Panel',
                        margins:'0 0 0 0'
                    }, {
                        region:'east',
                        title: 'East Panel',
                        collapsible: true,
                        split:true,
                        width: 225,
                        minSize: 150,
                        maxSize: 400,
                        layout:'fit',
                        items:
                            new Ext.TabPanel({
                                border:false,
    							enableTabScroll: true,
                                activeTab:1,
                                items:[{
                                    html:'<p>A TabPanel component can be a region.</p>',
                                    title: 'A Tab'                            },{
                                    html:'<p>Second test TabPanel component can be a region.</p>',
                                    title: '2nd Tab'
                                },{
                                    html:'<p>Second test TabPanel component can be a region.</p>',
                                    title: '3rd Tab'
                                },{
                                    html:'<p>Second test TabPanel component can be a region.</p>',
                                    title: '4th Tab'
                                },{
                                    html:'<p>Second test TabPanel component can be a region.</p>',
                                    title: '5th Tab'
                                }]
                            })
                     },{
                        region:'west',
                        id:'west-panel',
                        title:'West',
                        split:true,
                        width: 200,
                        minSize: 175,
                        maxSize: 400,
                        collapsible: true,
                        margins:'0 0 0 5'
                    },
                    new Ext.TabPanel({
                        region:'center',
                        deferredRender:false,
                        activeTab:0,
                        items:[{
                            contentEl:'center1',
                            title: 'Close Me',
                            closable:true,
                            autoScroll:true
                        }]
                    })
                 ]
            });
        });
    Attached Images

  2. #2
    Ext User
    Join Date
    Mar 2008
    Location
    Punjab, INDIA
    Posts
    6
    Vote Rating
    0
    amanbrar82 is on a distinguished road

      0  

    Default please help

    please help


    has anyone seen this kind of problem. Any Suggestions???

  3. #3
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
    toaotc is on a distinguished road

      0  

    Default


    I think it's not really a bug - it's just a missing feature

    i used this example and set the TabPanels "enableTabScroll" to true --> same bug/missing feature.

  4. #4
    Ext User
    Join Date
    Apr 2008
    Posts
    2
    Vote Rating
    0
    toaotc is on a distinguished road

      0  

    Default


    a possible solution:

    Code:
    .x-tab-strip-wrap {
    	width:auto!important;
    }
    !!! IE 6 doesn't support that !!!

  5. #5
    Ext User
    Join Date
    Mar 2008
    Location
    Punjab, INDIA
    Posts
    6
    Vote Rating
    0
    amanbrar82 is on a distinguished road

      0  

    Default


    hi toaotc, Thanks very much for your answer. It has solved display problem in Safari.
    You are right that IE doesn't support this, it is causing scrolling problems. But I think some browser specific CSS hack will do the trick.
    Thanks once again.

Thread Participants: 1