PDA

View Full Version : Zero margins does not applied after page is loaded.



jmaxt
25 Oct 2012, 12:55 AM
Hi. I tried to write my simple page structure with ext 4.1.1 and got a problem.



Ext.create('Ext.container.Viewport', {
style : {
backgroundColor : '#E6E9EA'
},
layout : {
type : 'vbox',
align : 'center',
defaultMargins : {
top : 0,
right : 0,
bottom : 0,
left : 0
}
},
items : [ {
xtype : 'container',
width : '70%',
html : 'Head of page. Beautifull image will be here',
style : {
backgroundColor : '#679CBB'
}
}, {
xtype : 'container',
width : '70%',
style : {
backgroundColor : 'green',
},
html : 'site menu for chapters will be here',
}, {
xtype : 'container',
width : '70%',
style : {
backgroundColor : 'red'
},
html : 'page content here (flex)',
flex : 1
}, {
xtype : 'container',
width : '70%',
style : {
backgroundColor : 'gray'
},
html : 'footer of page with counters pics'
}

]
});


When i load this code in browser (ie9, ff 16.01) i see not zero margins between my containers.
If i try to resize browser's window - margins is set up to zero correctly.

What are you thinking about this?

skirtle
25 Oct 2012, 8:47 AM
I tried your code and everything worked fine. I did a bit of experimenting and the only way I could get it to fail was to move it outside of an Ext.onReady. Does that fit what you're doing?

jmaxt
25 Oct 2012, 9:36 PM
Yes it is. I replaced code into


Ext.onReady(function(){

});

and it work correctly.

Thank you skirtle