1. #1
    Ext JS Premium Member DrZog's Avatar
    Join Date
    Mar 2007
    Location
    Bristol, UK
    Posts
    197
    Vote Rating
    1
    DrZog is on a distinguished road

      0  

    Question [2.0.1] Horizontal scrollbar when tab content overflows in centerpanel

    [2.0.1] Horizontal scrollbar when tab content overflows in centerpanel


    Apologies for posting again but still havent been able to solve this:

    When adding a tabpanel with lots of content to a centerpanel, the width is messed up and a horizontal scrollbar appears. Ive modified the standard complex example to show this as well as the thumb. Any ideas? Note: This only occurs in IE6, not FF or IE7 and at a resoltion of 1024x768 and below.

    Code:
    new Ext.TabPanel({
    	region:'center',
    	deferredRender:false,
    	activeTab:0,
    	items:[{
    		contentEl:'center1',
    		title: 'Close Me',
    		closable:true,
    		autoScroll:true
    	},{
    		 
    		title: 'Center Panel',
    		autoScroll:true,
    		items:[{
    			xtype:'tabpanel',
    			activeTab: 0,
    			items:[{	
    				title:'Tab 1',
    				html: 'This is some content',
    				height: 500  // To simulate a tab with a lot of content
    			},{	
    				title:'Tab 2',
    				html: 'This is some more content'
    			}]
    		}]
    	}]
    });
    (Drop the zip file into ../examples/layout)
    Attached Images
    Attached Files

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    1. Your center panel doesn't have a layout (should be 'fit').
    2. Your center panel doesn't have any settings and contains a single panel -> it should be removed.
    3. The panels inside the tabpanel should have autoScroll:true.

    Result:

    Code:
    new Ext.TabPanel({
    	region:'center',
    	deferredRender:false,
    	activeTab:0,
    	items:[{                        
    		title: 'Close Me',
    		closable:true,
    		autoScroll:true
    	},{
    		title: 'Center Panel',
    		xtype:'tabpanel',
    		activeTab: 0,
    		defaults: {
    			autoScroll:true
    		},
    		items:[{	
    			title:'Tab 1',
    			...

  3. #3
    Ext JS Premium Member DrZog's Avatar
    Join Date
    Mar 2007
    Location
    Bristol, UK
    Posts
    197
    Vote Rating
    1
    DrZog is on a distinguished road

      0  

    Default


    Thanks very much for this, it did the trick. Last question (promise!). You left out the cnter panels 'fit' conig but it still works. Is this strictly required?

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    92
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    TabPanel has default layout:'card' and FormPanel has default layout:'form'.

Thread Participants: 1