Results 1 to 4 of 4

Thread: Card layout:Horizontal scrolling issue in FF & Safari when resizing

  1. #1
    Ext JS Premium Member
    Join Date
    Jun 2007
    Posts
    44

    Default Card layout:Horizontal scrolling issue in FF & Safari when resizing

    I have a complex layout involving border-layout/card-layout/border-layout that contains a gridpanel with autoexpandcolumn. In firefox and sarfari, a horizontal scroll appears when grid is resized smaller. Strangely enough, resizing works perfectly in ie6. Resizing larger works fine on ff, safari and ie6.

    Try it out at:
    http://24.148.20.85:9000/devsupport/...out_post1.html

    The rendering of the content looks fine, I can see all the columns. The scrollbar doesn't need to be there. Scrolling doesn't reveal any additional content, only a blank background.

    My issues seem similar to djliquidice's post below, but he had issues on with ie6 which works fine for me.
    http://extjs.com/forum/showthread.ph...toexpandcolumn

    Layout code:
    Code:
    var viewport = new Ext.Viewport({
    	layout:"border",
    	items:[{	
    		region:"center",
    		id: 'panel-center',
    		autoScroll: true,
    		layout: 'fit',
    		items: [{
    			layout: 'card',
    			id: 'cardpanel-center',
    			activeItem:0,
    			border: true,
    			items: 
    			[{
    				layout: 'border',
    				id: 'folderview-card',
    				//title: 'Folder View',
    				autoScroll: true,
    				items: [
    					new Ext.Panel({
    						region: "north",
    						id: 'folderview-card-north',
    						title: 'Folder View - North',	
    						height: 50
    					}) ,
    					new Ext.grid.GridPanel({
    						store: store,
    						columns: [
    						    {id:'company',header: "Company", width: 80, sorcardle: true, dataIndex: 'company'},
    						    {header: "Price", width: 75, sorcardle: true, renderer: 'usMoney', dataIndex: 'price'},
    						    {header: "Change", width: 75, sorcardle: true, renderer: change, dataIndex: 'change'},
    						    {header: "% Change", width: 75, sorcardle: true, renderer: pctChange, dataIndex: 'pctChange'},
    						    {header: "Last Updated", width: 85, sorcardle: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    						],
    						stripeRows: true,
    						autoExpandColumn: 'company',
    						//forcefit: true,
    						autoHeight: true,
    						title:'Array Grid',
    						id: 'gridpanel',
    						region: 'center'
    					})
    				]
    			}]
    		}]	
    		},
    		{
    			region:"north",
    			title:"North",
    			height: 40
    		},
    		{
    			region:"south",
    			title:"south",
    			height: 40
    		},
    		{
    			region:"west",
    			title:"West",
    			minSize: 10,
    			width: 200,
    			maxSize: 400,
    			split:true,
    			autoScroll: true
    		}		
    	]
    });		
    }
    );
    Any ideas on this one? Perhaps may layout is overly complex.

    Albert

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4

    Default

    What's the purpose for the CardLayout? Are you planning on adding additional items to it?

  3. #3
    Sencha User
    Join Date
    Apr 2012
    Location
    Austin, Texas
    Posts
    4

    Default

    The problem appears to be the autoScroll:true at the 'folderview-card' level. Not sure why it's causing the scrollbar, but I think you can remove it without consequence to fix your issue. You should never need to add autoScroll at the level of your border layout -- it should be at each Panel that is a container of actual content that you want to scroll.

    It's definitely a FF display bug of some sort, as simply inspecting the Panel in Firebug causes it to re-render w/o the scrollbar. Strange.

  4. #4
    Ext JS Premium Member
    Join Date
    Jun 2007
    Posts
    44

    Default

    Yes, we are planning on have 3-4 cards depending to the particular information the user wants to see.

    I removed the autoScroll:true at the 'folderview-card' level, but the eliminates both horizontal and vertical scrolling. With vertical scrolling the user can't see the entire grid. I also tried randomly inserting autoScroll:true at various point with no luck.

    What would you suggest as a work around for this. Inserting a some code to refresh the layout? Inserting some FF specific code? Setting overflow-x:hidden at some level?

Posting Permissions

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