Results 1 to 2 of 2

Thread: 'minWidth' only works when the panel's layout is configuration is 'border'

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011

    Default 'minWidth' only works when the panel's layout is configuration is 'border'

    [4.1.0] All Browser - Using layout configuration 'minWidth' only works when the panel's layout is configuration is 'border'.


    Ext version tested:
    • Ext 4.1.0
    Browser versions tested against:
    • FireFox 17.01
    • Chrome 23.0.1271.95I
    • WebKit 6.0.2
    • IE 9, IE 8, IE 7 (Mac os x running VMWare)
    A Viewport

    with a layout configuration of 'minWidth' only works when the panel's layout is configuration is 'border'.

    This is easy to reproduce by building a Viewport and configuirng it with 'autoscroll: true', 'minWidth: someValue' and setting the layout configuration to 'border'. View the page in any browser. Note that when the browser is resized below the specified 'minWidth', horizontal scrollbars appear and work perfectly.

    Using the same file, remove the 'border' layout configuration. View the modified page in a browser and resize the browser less than the 'minWidth' value previously set. Note that the page is cut-off and NO HORIZONAL SCROLLBARS appear to allow access to the missing page items.

    The following 'Test Case' example has been configured with the following. It has a Header, 1000px wide and 150 tall. The main content area is also a fixed size, 1000px wide, 400px tall. Below the main content area is the footer panel. Note that it has only a set height of 75px and the width stretches across the entire width of the browser. If you remove the layout: border config, the minWidth is not respected and no scrollbars to reach the hidden content.

    Test Case:


    Ext.define('MyApp.view.MyViewport', {
    	extend : 'Ext.container.Viewport',
    	minWidth : 1000,
    	minHeight : 425,
    	autoScroll : true,
    	layout : {
    		type : 'border'
    	initComponent : function() {
    		var me = this;
    		Ext.apply(this, {
                items: [{
                    xtype : 'panel',
    				region : 'north',
    				title : 'NORTH, width 100%',
                    items: [{
    		            xtype: 'panel',
    		            title : 'vBox, width 100%, centered',
    		            layout: {
    		                align: 'center',
    		                type: 'vbox'
    			            items: [{
    		                    xtype : 'panel',
    							height : 150,
    							width : 1000,
    							bodyStyle : 'background-color: #aaa',
    							title : 'HEADER, 1000x150'
    		            	}, {
    		                	xtype : 'panel',
    							height : 400,
    							width : 1000,
    							bodyStyle : 'background-color: #ddd',
    							title : 'ENROLLMENT, 1000x400'
    	          	}, {
    	          		xtype : 'panel',
    					height : 75,
    					bodyStyle : 'background-color: #bbb',
    					title : 'FOOTER, width 100% x 75px'
                }, {
                    xtype: 'container',
                    region: 'center',
                    html : 'CENTER'

    Operating System:
    • MacOSx 10.7.5

    Last edited by mitchellsimoens; 11 Dec 2012 at 12:40 PM. Reason: added CODE tags

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL


    IMO Ext.container.Viewport should be used when you want it to have 100% width and height of the browser's viewport. Anything else should use a Ext.container.Container
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:

    Posts are my own, not any current, past or future employer's.

Posting Permissions

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