GWT layout: How would I fix this layout (DockPanel)?

StackOverflow https://stackoverflow.com/questions/12254614

  •  30-06-2021
  •  | 
  •  

Question

I am trying to find my way around in Google's Web Toolkit. So I wanted to make a little page with a 100% height and 100% width layout. I wanted no margin, no padding and no scrollbars.

I used a DockPanel and added it to the page like this:

package de.kuntze.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DockPanel;
import com.google.gwt.user.client.ui.HasAlignment;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

public class BeginningGWT_BookExample implements EntryPoint {
  public void onModuleLoad() {
    DockPanel mainPanel = new DockPanel();
    mainPanel.setBorderWidth(5);
    mainPanel.setSize("100%", "100%");
    mainPanel.setVerticalAlignment(HasAlignment.ALIGN_MIDDLE);
    mainPanel.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);

    Widget header = new Label("Header");
    mainPanel.add(header, DockPanel.NORTH);
    mainPanel.setCellHeight(header, "30px");

    Widget footer = new Label("Footer");
    mainPanel.add(footer, DockPanel.SOUTH);
    mainPanel.setCellHeight(footer, "25px");

    Widget categories = new Label("Categories");
    mainPanel.add(categories, DockPanel.WEST);
    mainPanel.setCellWidth(categories, "150px");
    mainPanel.setCellHeight(categories, "500px");

    Widget tasks = new Label("Tasks");
    mainPanel.add(tasks, DockPanel.EAST);
    RootPanel.get().add(mainPanel);
  }

}

I also added some CSS code to configure the html and body tag:

* {
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
}

html, body{
  height: 100%;
  width: 100%;
  min-height: 100%;
}

The html page I use looks like that:

<!doctype html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="BeginningGWT_BookExample.css">
    <title>Web Application Starter Project</title>
    <script type="text/javascript" language="javascript" src="beginninggwt_bookexample/beginninggwt_bookexample.nocache.js"></script>
  </head>

  <body>
  </body>
</html>

So here comes my problem: In the compiled web page is a 5-10px (estimated) margin on the left which I cannot explain or get rid off. I looked at it through chrome and firefox and the result is the same. How can I get rid of the extra spacing on the left? I would like to have a 100% filled website.

Thanks in advance for any answers

André

P.S.: I itentionally did not use UI Binder as I need to learn to go without it for now. So please do not start a discussion about that. Thanks ;-)

Was it helpful?

Solution

The margin of 10px comes from the clean.css which is part of the Clean theme applied.

You can change this theme to Standard theme from your module configuration file.

just remove or comment

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

and add 

  <inherits name='com.google.gwt.user.theme.standard.Standard'/>

Doing so would remove the margin.

Or else you can obviously also override the styles in your css. So in the body style also add "margin 0px !important;"

html, body{
   height: 100%;
   width: 100%;
   min-height: 100%;
   margin 0px !important
}

OTHER TIPS

The problem is:

RootPanel.get().add(mainPanel)

With DockLayoutPanel you need to use

RootLayoutPanel.get().add(mainPanel)

Pls see https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

RootLayoutPanel

This panel is a singleton that serves as a root container to which all other layout panels should be attached (see RequiresResize and ProvidesResize below for details). It extends LayoutPanel, and thus you can position any number of children with arbitrary constraints.

You most commonly use RootLayoutPanel as a container for another panel, as in the following snippet, which causes a DockLayoutPanel to fill the browser's client area:

DockLayoutPanel appPanel = new DockLayoutPanel(Unit.EM); RootLayoutPanel.get().add(appPanel);

Once you do that you can get rid of the css (DockLayoutPanel will take all the space anyway, it's how it works):

html, body{
  height: 100%;
  width: 100%;
  min-height: 100%;
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top