Full width on adding panels to root panel

[art]

Hi,

Started to evaluate Gwt designer 1.7.2 on Windows some days ago. Using the design view I am not able to add panels for the full width. For example, adding a VerticalPanel to the RootPanel, and setting its width to 100%, leaves me with a width of around 97.4%. This shortage of width can be seen visually, however the properties display 100%.

Using Test/Preview shows the vertical panel short. Using hosted mode shows it short (All windows explorer I suppose). But compiling and using Mozilla Firefox shows the panel the full width (100%).

So far I haven't been able to find someone with a similar problem. Thus, is this a normal behaviour? An explorer thing? Css thing?

Any hints would be helpful...

Art

[Eric Clayberg]

So far I haven't been able to find someone with a similar problem. Thus, is this a normal behaviour? An explorer thing? Css thing?

Probably a CSS thing. The RootPanel uses the CSS style "body"...

Code: Select all

body {
   background-color: white;
   color: black;
   font-family: Arial, sans-serif;
   font-size: small;
   margin: 5px;
}

Try reducing the margin to 0px.

[art]

Probably a CSS thing. The RootPanel uses the CSS style "body"...

Thanks for your reply.

I've already tried that without any effect. That is, changed the margin of the body class to 0px in the auto generated css file of my module's main class (entry point).

But this also wouldn't explain the difference between firefox and IE7.

I can however sort of fix the shortage in width. By setting the widh property to 103% (?) the page looks correct in IE7. Mozilla then shows it too wide... ;-)

If no one else has this problem, I suppose it's somewhere in my own setup (?). Problem is that it occurs even if I start a new project.

Art

[Eric Clayberg]

I've already tried that without any effect. That is, changed the margin of the body class to 0px in the auto generated css file of my module's main class (entry point).

When I tried 0px, it worked fine on my end.

But this also wouldn't explain the difference between firefox and IE7.

I don't think that needs much explanation. Both browser have a huge number of differences in the way they render things in general. Google had to do a tremendous amount of work to get most things in GWT to look the same on different browsers - even to the extent of generating custom JavaScript code that gets dynamically loaded based on the browser that is used. GWT's cross browser compatibility does have several holes in it, and this may be one of them.

In this case, IE seems to be respecting the CSS margin setting while firefox is not. That could be a firefox issue or it could be a GWT/firefox JavaScript code gen issue. Posting a simple example to Google's GWT forum might be a good idea.

[art]

Once more thanks for the reply.

Figured it out... somehow...

I created a new project Test and the Test.java entry point was created. I opened the Test.java design view and added a button into it. It got absolute positioned and since I wanted to have it over the full width I put it at LEFT 0 and set its width property to 100%. This left me with source code:

Code: Select all

rootPanel.add(button, 0, 0);
button.setWidth("100%");

The design preview, and hosted mode (IE7) showed it short on the right side, but compiling the code and running it in firefox showed the button over the full length. IE7 after compiling showed short.

Since the Test.css file body class has a margin of 5px, this would seem to be causing the behavior. Mozilla looks to respect the absolute positioning at 0 and width 100% and ignores the 5px margin. IE7 is positioning the button at absolute 0 but leaves space on the right which looks to be double the margin (10px).

I guess absolute positioning on the edges and margins do not work well together. However when I changed the css file 5px margin to 0px nothing changed for me. All remained the same.

I kept on testing with creating new projects but overlooked one thing. I never changed the

Code: Select all

rootPanel.add(button, 0, 0);

to

Code: Select all

rootPanel.add(button);

When I did so, all was fine.

However changing the code back to

Code: Select all

rootPanel.add(button, 0, 0);

still left it fine...

Playing around with this a bit I still have the shortage on the right side now and then (with both 0 and 5px css margins).
But calling the rootPanel.add without coordinates always fixes it. After the fix you can add the proper top coordinate.

Art

[Eric Clayberg]

Very strange. When we try to use the following code:

Code: Select all

clickMeButton = new Button();
rootPanel.add(clickMeButton, 0, 0);
clickMeButton.setSize("100%", "100%");
clickMeButton.setText("Click me!");

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

...the Button fully fills the Browser window (under IE6, IE7 and FireFox) without any margins.

It does not matter if I use

Code: Select all

rootPanel.add(clickMeButton, 0, 0);

or

Code: Select all

rootPanel.add(clickMeButton);

Without the coordinates, the widget is placed in the "flow position", i.e. after any earlier "flow based" widget.