FieldSet in Viewport (bottom/right margins different than left/top, even though same)

FieldSet in Viewport (bottom/right margins different than left/top, even though same)

I had a FieldSet as the child of the ViewPort, and the margins used for top and left are different than the margins for bottom and right. The same behavior exists for ContentPanel, and the issue seems to happen in both IE8 and Chrome.

I would expect the margins to be the same all away around. If I didn't give margins, I wouldn't be able to see the bottom or right border at all.

Code:

Viewport viewport = new Viewport();
/* have to use a margin to be able to see the right and bottom borders, and margins are not uniform*/
viewport.add(asWidget(), new MarginData(20);
RootPanel.get().add(viewport);

Thanks for verifying - it looks good otherwise, but the test isn't breaking when i confirm locally. Here is my full entrypoint - I removed the asWidget() method, and added a missing close parenthesis:

Code:

public class Test implements EntryPoint {
public void onModuleLoad() {
Viewport viewport = new Viewport();
/* have to use a margin to be able to see the right and bottom borders, and margins are not uniform*/
FieldSet fs = new FieldSet();
fs.setHeadingText("field set");
viewport.add(fs, new MarginData(20));
RootPanel.get().add(viewport);
}
}

My goal in posting this is to minimize any possible confusion on other things which could contaminate the page.

In this screenshot I also have the version window to verify that I am testing IE8. You can see that I am running dev mode as well.screenshot9.png
Also running in prod mode:screenshot10.png
I did not test with 3.0.2, this is just 3.0.3-snapshot.

So, based on the fact it worked for you, I started to simplify my environment as well.

Right now it seems to be related to the following in our gwt.xml file

<inherits name='com.google.gwt.user.theme.clean.Clean' />

What really adds to the confusion is in in dev mode making removing this and refreshing browser doesn't "stick". But when I refreshed the second time, it did. So taking me awhile to figure out what change is actually making the change.

Thanks for reporting back - this is a useful diagnostic step that I will be aware of in the future.

From reviewing the clean.css that GWT's Clean theme adds to the page (see /com/google/gwt/user/theme/clean/public/gwt/clean/clean.css in gwt-user.jar), it appears they are re-resetting the defaults of each element on the page to their own base theme. This is very likely to break *any* css that doesnt' explicitly provide styles for each and every possible attribute for every possible element listed. We use our own reset.css as a way of 'starting over' consistently in all browsers, and make additional changes based on that.

I suspect this is the specific css segment that is causing the bug in your case:

If you must use the Clean theme in your application (GXT requires none of the GWT themes, and as far as I know, most of the newer GWT widgets don't even require it, but use the better behaving CssResources instead), this margin will need to be reduced back to 0px. One possible CSS snippet that will effect this change:

Code:

body {
margin: 0px !important;
}

If you don't use the styles declared in the GWT theme modules, simply remove them from your module file.