tabs hide under a bar when resizing east panel in Safari

[amanbrar82]

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.

    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
                    }]
                })
             ]
        });
    });

[amanbrar82]

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

[toaotc]

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.

[toaotc]

a possible solution:

.x-tab-strip-wrap {
	width:auto!important;
}

!!! IE 6 doesn't support that !!!

[amanbrar82]

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.