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

**nbuesing** · 4 Dec 2012, 10:08 AM

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

ViewPortFieldSetMargins.zip

**Colin Alworth** · 4 Dec 2012, 10:32 AM

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

**nbuesing** · 4 Dec 2012, 10:49 AM

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>
<!-- The DOCTYPE declaration above will set the     -->
<!-- browser's rendering engine into                -->
<!-- "Standards Mode". Replacing this declaration   -->
<!-- with a "Quirks Mode" doctype is not supported. -->

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <!--                                                               -->
    <!-- Consider inlining CSS to reduce the number of requested files -->
    <!--                                                               -->
    <link type="text/css" rel="stylesheet" href="Examples.css">
    <link type="text/css" rel="stylesheet" href="examples/reset.css" />

    <!--                                           -->
    <!-- Any title is fine                         -->
    <!--                                           -->
    <title>Web Application Starter Project</title>
    
    <!--                                           -->
    <!-- This script loads your compiled module.   -->
    <!-- If you add any GWT meta tags, they must   -->
    <!-- be added before this line.                -->
    <!--                                           -->
    <script type="text/javascript" language="javascript" src="examples/examples.nocache.js"></script>
  </head>

  <body>

    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <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>

**Colin Alworth** · 4 Dec 2012, 11:30 AM

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.
screenshot9.png
Also running in prod mode:
screenshot10.png
I did not test with 3.0.2, this is just 3.0.3-snapshot.

**nbuesing** · 4 Dec 2012, 11:49 AM

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.

**Colin Alworth** · 4 Dec 2012, 12:20 PM

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.

**nbuesing** · 4 Dec 2012, 12:34 PM

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.

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

Thread Tools

Search Thread

Display

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

Posting Permissions

Stay Connected

Stay Connected

Sign up for Sencha News