PDA

View Full Version : [CLOSED] [4.2.1 beta] Item of HBox or VBox lose its CSS margins on moving to another container



Daniil
1 May 2013, 1:03 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.2.1 beta

Browser versions tested against:

Chrome
IE9

DOCTYPE tested against:

<!DOCTYPE html>

Description:

An item of VBox or HBox layouts lose its CSS margins on moving to another container. When I say CSS margins, I mean setting margins direct by CSS without using an AbstractComponent's margin config option. If use the margin config, then everything is OK.

Steps to reproduce the problem:

Click the button

The result that was expected:

The margin-bottom persists

The result that occurs instead:

The margin-bottom is lost

Test Case:


<!DOCTYPE html>
<html>
<head>
<title>Item of HBox or VBox layout lose its CSS margins on moving to another container</title>

<link rel="stylesheet" href="../resources/css/ext-all.css" />

<style>
.my-margin {
margin-bottom: 10px;
}
</style>

<script src="../ext-all-debug.js"></script>

<script>
Ext.onReady(function () {
var p1, p2;

p1 = Ext.create("Ext.panel.Panel", {
renderTo: Ext.getBody(),
width: 400,
height: 300,
layout: {
type: "hbox",
align: "stretch"
},
items: [{
flex: 1,
layout: {
type: "vbox",
align: "stretch"
},
items: [{
id: "child",
title: "Notice my margins",
cls: "my-margin",
//margin: "0 0 10 0", //it persists
flex: 1
}, {
title: "Notice my margins",
cls: "my-margin",
//margin: "0 0 10 0", //it persists
flex: 1
}]
}, {
id: "newParent",
flex: 1,
layout: {
type: "vbox",
align: "stretch"
},
items: [{
title: "Notice my margins",
cls: "my-margin",
//margin: "0 0 10 0", //it persists
flex: 1
}]
}]
});

Ext.create("Ext.button.Button", {
renderTo: Ext.getBody(),
text: "Move >>",
handler: function () {
Ext.suspendLayouts();
Ext.getCmp("newParent").add(Ext.getCmp("child"));
Ext.resumeLayouts(true);
}
});
});
</script>
</head>
<body>

</body>
</html>



HELPFUL INFORMATION

Screenshot:

Initially:

43453


After click on the Button

43454

mitchellsimoens
1 May 2013, 5:13 AM
Thanks for the report.