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

2 Attachment(s)

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

GXT 3.0.3-SNAPSHOT 11/27 (but existed in 3.0.2 as well)
GWT 2.4.0
Windows 7 - 64 bit
Internet Explorer 8
Chrome 25

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);

Attachment 40567

Missing right border is indicative of missing reset.css on the html page - can you confirm that this is present?

Well, it was missing from my test code, but adding it made no difference.

1. Added link to example project (see code below)
2. verified that reset.css was accessible by url by putting URL in browser and making sure it returned it
http://127.0.0.1:8888/examples/reset.css

I also brought up the IE8 Developer tools and verified the CSS for reset.css was listed.

So, while it was missing, I'm still seeing the error. I am wondering if I have something else missing in my configuration, thanks for the information.

Code:

<!doctype html>     <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8">    <link type="text/css" rel="stylesheet" href="Examples.css"> <link type="text/css" rel="stylesheet" href="examples/reset.css" />    <title>Web Application Starter Project</title>      <script type="text/javascript" language="javascript" src="examples/examples.nocache.js"></script> </head> <body>  <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>  <noscript> <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif"> Your web browser must have JavaScript enabled in order for this application to display correctly. </div> </noscript> </body> </html>

2 Attachment(s)

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); } }

Html file:

Code:

<!doctype html> <html> <head> <title>Sencha GXT Tests</title> <link rel="stylesheet" type="text/css" href="test/reset.css" /> </head> <body> <script language='javascript' src='test/test.nocache.js'></script> </body> </html>

and Module file:

Code:

<module rename-to='test'> <inherits name='com.sencha.gxt.ui.GXT' /> <entry-point class='com.sencha.gxt.examples.test.client.Test' /> </module>

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.
Attachment 40571
Also running in prod mode:
Attachment 40572
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:

Code:

body { color: black; margin: 10px; border: 0px; padding: 0px; background: #fff; direction: ltr; }

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.

I do not see the need for us to use Clean, so yes, removing it is what we will be doing. It was one of those "innocent looking" inheritance that I didn't thing would cause issue.

So, as far as I can see, we can stop using this, and this should fix our problem.

Thanks again for all of your help.