Question

我正试图在Google的Web Toolkit中找到自己的方法。所以我想制作一个100％高度和100％宽度布局的小页面。我想要没有边距，没有填充，也没有滚动条。

我使用了DockPanel并将其添加到页面中：

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

}

我还添加了一些CSS代码来配置html和body标签：

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

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

我使用的html页面如下：

<!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>

所以这就出现了我的问题：在编译的网页中左边是5-10px（估计）的边距，我无法解释或摆脱。我通过chrome和firefox查看它，结果是一样的。我怎样才能摆脱左边的额外间距？我想拥有100％的网站。

提前感谢您的回答

安德烈

P.S。：我当然没有使用UI Binder，因为我现在需要学会不使用它。所以请不要开始讨论。谢谢; - ）

Answer 1

10px的边距来自clean.css，它是应用Clean主题的一部分。

您可以从模块配置文件中将此主题更改为标准主题。

只需删除或评论

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

并添加

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

这样做会删除保证金。

否则你显然也可以覆盖你的CSS中的样式。所以在体型中还加上“margin 0px！important;”

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

Answer 2

问题是：

RootPanel.get（）。添加（mainPanel中）

使用DockLayoutPanel，您需要使用

RootLayoutPanel.get（）。添加（mainPanel中）

请参阅https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

RootLayoutPanel

此面板是一个单例，用作所有的根容器   应附加其他布局面板（请参阅RequiresResize和   下面提供了Resize以获取详细信息）。它扩展了LayoutPanel，因此   你可以定位任意数量的儿童任意约束。

您最常使用RootLayoutPanel作为另一个的容器   面板，如下面的代码片段所示，它导致DockLayoutPanel   填写浏览器的客户区：

DockLayoutPanel appPanel = new DockLayoutPanel（Unit.EM）;   RootLayoutPanel.get（）添加（appPanel）;

一旦你这样做，你可以摆脱css（无论如何，DockLayoutPanel将占用所有空间，它是如何工作的）：

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

GWT布局：如何修复此布局（DockPanel）？

2 个答案: