PDA

View Full Version : [4.1.3] HBox layout cuts an item



Daniil
21 Nov 2012, 4:03 AM
REQUIRED INFORMATION

Ext version tested:

Ext 4.1.3

Browser versions tested against:

Chrome
FireFox
IE9

DOCTYPE tested against:

<!DOCTYPE html>

Description:

HBox layout cuts an item.
Also the button in Chrome is wider than in IE9 and FireFox.

Steps to reproduce the problem:

Just run the sample

The result that was expected:

No cut

The result that occurs instead:

The button is cut. Please look at the screenshot.

Test Case:


<!DOCTYPE html>
<html>
<head>
<title>HBoxLayout cuts item</title>

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

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

<script type="text/javascript">
Ext.onReady(function () {
Ext.create("Ext.button.Button", {
renderTo: Ext.getBody(),
width: 15,
menu: {
xtype: "menu"
}
});

Ext.create("Ext.container.Container", {
renderTo: Ext.getBody(),
width: 100,
layout: "hbox",
items: [{
xtype: "displayfield",
flex: 1,
value: "Hello"
}, {
xtype: "button",
width: 15,
menu: {
xtype: "menu"
}
}]
});
});
</script>
</head>
<body>

</body>
</html>


HELPFUL INFORMATION

Screenshot:

mitchellsimoens
21 Nov 2012, 8:02 AM
The first button isn't just 15px, it's actually 22px wide. You have some border and padding in play.

Daniil
21 Nov 2012, 8:19 AM
Thank you for the answer.

Do you mean that I should not set up the width less than 22?

Daniil
28 Nov 2012, 7:57 AM
Agree, 15 is just not enough to get a full button.

But 18 is enough, not 22.

I think you can close this thread. Thank you.