Results 1 to 6 of 6

Thread: [SOLVED]Viewport margins not working in Internet Explorer

  1. #1
    Ext User
    Join Date
    Apr 2009
    Location
    Sydney, NS, Canada
    Posts
    11
    Vote Rating
    0
      0  

    Question [SOLVED]Viewport margins not working in Internet Explorer

    Hi everyone,

    Here is a very simple layout which works in FF but doesn't have margins in IE 7.

    Code:
    <html><head><title></title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    
    <script type="text/javascript">
    Ext.onReady(function() {
    	var viewport = new Ext.Viewport({
    		layout:'border'
    		,style:'margin: 50px 50px 50px 50px;'	
    		,items:[{
    				region:'north'
    				,height:50		
    			},{
    				region:'east'
    				,width:50
    			},{
    				region:'south'
    				,height:50
    			},{
    				region:'west'
    				,width:50
    			},{
    				region:'center'
    		}]
    	});
    	
    });
    </script>
    </head><body></body></html>
    It is set up so you can drop it in the examples folder to test.
    This seems so simple and yet no matter what I try I am unable to get the margins to display in IE.

    Thanks for the help,
    -dillon
    Last edited by dillon; 27 Nov 2009 at 11:32 AM. Reason: solved

  2. #2
    Ext User
    Join Date
    Apr 2009
    Location
    Sydney, NS, Canada
    Posts
    11
    Vote Rating
    0
      0  

    Default

    I added a doctype to my page and that has partially fixed the problem. The Margins now appear but the right hand side of the viewport is cut off and appears to be overflowing outside the right margin. Here's the code with the doctype included:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html><head><title></title>
    <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
    <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../ext-all-debug.js"></script>
    
    <script type="text/javascript">
    Ext.onReady(function() {
      
    	var viewport = new Ext.Viewport({
    		layout:'border'
    		,style:'margin: 50px 50px 50px 50px;'	
    		,items:[{
    				region:'north'
    				,height:50		
    			},{
    				region:'east'
    				,width:50
    			},{
    				region:'south'
    				,height:50
    			},{
    				region:'west'
    				,width:50
    			},{
    				region:'center'
    		}]
    	});
    	
    });
    </script>
    </head><body></body></html>

  3. #3
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
      0  

    Default

    I've noticed in the ViewPort or Portal Example that the margins are shifted, and in the config there is both margin and cmargin specified, is it for this reason?!?

    Code:
    margins: '50 50 50 50',
    cmargins: '50 50 50 50',

  4. #4
    Sencha User
    Join Date
    Sep 2009
    Location
    Calgary, Alberta, Canada
    Posts
    638
    Vote Rating
    2
      0  

    Default

    cmargins does nothing, but margins do, and they are specified within each panel.

    Code:
    items: [{
        region: 'north',
        margins: '50 50 0 50'
    },{
        region: 'east',
        margins: '50 50 50 0'
    },{
        region: 'south',
        margins: '0 50 50 50'
    },{
        region: 'west',
        margins: '50 50 50 0'
    },{
        region: 'center',
        margins: '5 5 5 5'
    }]
    I am assuming you want a 50 px border around your viewport.

  5. #5
    Ext User
    Join Date
    Apr 2009
    Location
    Sydney, NS, Canada
    Posts
    11
    Vote Rating
    0
      0  

    Default

    Thank you, it never occoured to me to set the margins for each region.

  6. #6
    Sencha User aw1zard2's Avatar
    Join Date
    Sep 2009
    Location
    Dallas, Texas
    Posts
    589
    Vote Rating
    32
      0  

    Default

    cmargins = collapsible margins

Posting Permissions

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