Widget offsetWidth and OffsetHeight (Does it include margin, padding, border or some or both)

[melody]

Style as follows
. mywidget {
padding: 5px;
border: 1px solid red;
margin: 5px;
}

Widget widget = ... some widget;

//apply style
widget.setStyleName("mywidget");

//set width and height;
widget.setPixelSize(100, 100);

Question:
Does the width of 100px include in it the 10px padding, 10px margin
and 2px border.

If "widget" was a container and I wanted to add a child to it, how
much space will I have available to add the child?

Do I have 100 - 22 = 78 (assuming I dont want the child to cause the
parent to expand?

Or do I have 100px for the child (22 of which are outside).

Confused as hell.

How does box-sizing style affect it. I have tried testing with box-
sizing and -moz-box-sizing and the results absolutely make no sense.
*{
/*-moz-box-sizing:border-box;box-sizing:border-box;margin:
0px;padding:0px;
-moz-box-sizing:padding-box;box-sizing:padding-box;margin:
0px;padding:0px;
-moz-box-sizing:content-box;box-sizing:content-box;margin:
0px;padding:0px;*/
-moz-box-sizing:border-box;margin:0;padding:0;
}

SOS

Thanks,

Melody

[gregor]

Hi Melody,

AFAIK with FF and Safari is you specify a box of 100x100px with 20px
padding you get a box of 100x100 with 20px padding round the outside
making 140x140px total. In IE however you get a box of 60x60 with
20px padding making 100x100px total. FF/Safari follow W3C
specification on this and IE does not leading to the term "IE broken
box model".

There are a variety of methods for getting round this and you can
Google "broken box model" or "box model hack" for further info.

If it's any help to you this is how I got round it: In this test case
I wanted to place a 10px border round a HorzontalSplitPanel so that it
filled the whole client area except for the 10px border. The way I did
it was to wrap the HSP in a SimplePanel and apply the border to the
SP, not the HSP itself, and size the HSP from Window.getClientWidth()
and Window.getClientHeight() taking into account the borders. This way
IE pushes the SP out to full client size to make space for the border
inside it, and FF/Safari draw the SP flush to the HSP drawing the
border outside it. Either way the effect is the same.

e.g.:

body {
background-color: white;
color: black;
font-family: Arial, sans-serif;
font-size: small;
height: 100%;
margin: 0px;
padding: 0px;
}


.split-wrapper {
border: 10px solid blue;
}




public class Scratch implements EntryPoint..... {

private class ResizeListener implements WindowResizeListener {

private int width, height;
private boolean pending;
private Command command;

ResizeListener() {
command = new Command() {
public void execute() {
pending = false;
adjustSize(width,height);
}
};
}

public void onWindowResized(int width, int height) {
this.width = width;
this.height = height;
if (pending == false) {
pending = true;
DeferredCommand.addCommand(command);
}
}
}

private final ResizeListener windowListener = new
ResizeListener();
private SimplePanel splitWrapper = new SimplePanel();
private HorizontalSplitPanel split = new HorizontalSplitPanel();
.....
.....
split.setLeftWidget(tab);
split.setRightWidget(rightPanel);
split.setSplitPosition("35%");
splitWrapper.setStyleName("split-wrapper");
splitWrapper.add(split);
.......
.......
DeferredCommand.addCommand(new Command() {
public void execute() {
windowListener.onWindowResized(Window.getClientWidth(),
Window.getClientHeight());
}
});
.......
.......
private void adjustSize(int windowWidth, int windowHeight) {
// calc width here to account for 10px borders E&W
int width = windowWidth - 20;
// calc height to account for 10px border S only
// this caters for e.g. adding a header above the HSP
int height = windowHeight - split.getAbsoluteTop() - 10;
split.setSize("" + width, "" + height);
.......
.......
}

regards
gregor