Bug (?) when panels have margin

[SteveEisner]

Firefox2...
Don't have a tiny repro yet but I added this:

<div>
<div>THIS IS A BUG?</div>
</div>

as a panel within a region:

xPanel = new YAHOO.ext.ContentPanel('x', {title: 'X', fitToFrame:true});
layout.add('center', xPanel);

with this CSS:

#x div {
margin: 20px;
}


Result:
The panel has a scrollbar even though it shouldn't need it. Probably some form of boxmodel issue. I added the internal div because first I noticed it with #x { margin: 20px; } but wanted to show that even with inside elements it still happens

[SteveEisner]

Should add that this is 33 beta 2 - and I don't believe it was happening in beta1

[jack.slocum]

You are telling it to resize the panel to fit in the region and then you are setting margins. So if you set margins to 10px and add fitToFrame, and then frame is 200x200, then "x" will be fit (200x200) and the 10px margins will cause overflow. Does this make sense? If want you want is padding, try using padding instead.

[SteveEisner]

my point though was that the inner div has margins, not the outer (which is made fixed width)
i might just be missing something but I thought margin on inner div should be the same as padding on outer? (or are margins somehow collapsing?)

[jack.slocum]

Basically you have 2 options:

- Remove fitToFrame. This will allow the browser to layout the content automatically rather than with a fixed size.

- Add a nested div with the margins (and content) and fitToFrame the outer one (with no margins).

I think it's just a misunderstanding as to what you are trying to do. All size calculations resize the element to a specified offsetWidth/offsetHeight and those do not include margins. So if the "frame" (the region) is 200x200 and you tell the layout manager to resize (fitToFrame) the child element (the panel) to the same size as the region (200x200) and you put margins on the panel it is going to take up 200x200 + margins since margins are not considered part of an elements size.

There are ways to work around this, generally done using either padding and/or nesting. You can also apply margins to the region using the margins config option.