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

我正试图在Google的Web Toolkit中找到解决方法。所以我想制作一个100％高度和100％宽度布局的小页面。我不想保证金，没有填充和没有滚动条。GWT布局：我将如何修复此布局（DockPanel）？

我用了一个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：我itentionally，因为我需要学习，没有它去，现在没有使用UI活页夹。所以请不要就此开始讨论。谢谢;-)

来源

2012-09-03 AndreKuntze

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

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

只是删除或评论

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

，并添加

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

这样做会删除保证金。

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

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

来源

2012-09-03 23:21:04

Hi和感谢了很多：这解决了我的问题，我认为我必须仔细看看Theming。 – AndreKuntze

谢谢，这也帮助我了，至于为什么这是默认行为，给出clean.css不存在。 –

的问题是：

RootPanel.get（）加（mainPanel中）

随着DockLayoutPanel你需要使用

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

PLS看到https://developers.google.com/web-toolkit/doc/latest/DevGuideUiPanels

RootLayoutPanel

此面板是用作到其中所有其他布局面板应该被附接（见RequiresResize和根容器中的单下面的ProvideResize以获取详细信息）。它扩展了LayoutPanel，因此可以定位任意数量的具有任意约束的子项。

您最常使用RootLayoutPanel作为容器另一面板，如下面的代码段，这将导致DockLayoutPanel到填补了浏览器的客户端区域：

DockLayoutPanel appPanel =新DockLayoutPanel（Unit.EM）; RootLayoutPanel.get（）。add（appPanel）;

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

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

来源

2012-09-04 06:54:38 Spiff

您好，非常感谢您将我指向RootLayoutPanel。我会进一步调查。无论如何 - 即使它现在可能不是“干净”的解决方案 - 我把解决的标志交给Ankur。在这种情况下，您的解决方案仍留有滚动条，因此尚未完全解决 - 但您的答案仍然非常有用，并有助于在未来编码更清晰。谢谢。 – AndreKuntze

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

回答

相关问题