PDA

View Full Version : body width of a panel is incorrectly calculated if a margin or border style is added



ChrisWalker
1 Aug 2011, 2:16 PM
If you create a generic panel and have a css margin or border set in its class, the body <div> of the panel has its width incorrectly calculated.

I have a panel using a class with these styles:
margin-right: 10px;
margin-left: 10px;
border: solid thin black;

using Google's developer tools, I see the panel in question has the inline width set to 825px (the div having class x-panel). Its child div (having class x-panel-body) has its width set inline as 803px. A difference of 22px (left and right margins and borders = 22px) The width of the body should be the same as the width of its parent in this case and the margin and border (as well as the padding) should not be used for its calculation based on CSS's box rule where the padding, border and margin are not part of the width value. jQuery added an outerwidth() method to add the margins/borders/padding to the width to distingush a "full width" and a css width. I imagine that the confusion on what exactly is a "width" warranted this...