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）？

回答

相關問題