Как установить маржу в 5% при использовании RootLayoutPanel и DockPanel - PullRequest
Новая
       11

Как установить маржу в 5% при использовании RootLayoutPanel и DockPanel

2 голосов
/ 24 января 2010

Я поигрался с GWT 2, и мне довольно сложно получить базовый макет страницы, который я хочу. В основном я использую DocLayoutPanel, где я добавляю север (верхний колонтитул), юг (нижний колонтитул), запад (навигация) и область содержимого. Я бы хотел, чтобы панель документов занимала 90% страницы и была отцентрирована. Это дало бы хорошую маржу в 5%. Однако из-за использования GWT верхних, левых, правых и нижних стилей он использует мои обычные стратегии (margin: auto) для центрирования не работает.

Как мне добиться того, что я хочу, способом GWT?

Ответы [ 2 ]

5 голосов
/ 25 января 2010

Из прочтения вашего вопроса не ясно, о чем вы спрашиваете, но я думаю, что вы хотите, чтобы вся панель Dock имела маржу в 5%?

Все новые * LayoutPanels в Gwt 2.0 используют абсолютное позиционирование css, поэтому вы видите верхний / левый / правый / нижний стили. Вот почему вы используете стратегию маржи: авто не работает.

DockLayoutPanel действительно только для макета. Я бы предложил настроить поля виджетов, которые вы помещаете в DockLayoutPanel, для достижения желаемого эффекта.

Я сам выстрелил в это и приблизился к ответу, но он не идеален. Я поместил метки в каждую из панелей DockPanels с полем в 10 пикселей, но правая и нижняя границы не показывают этого поля. 

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>.label {
        background: #666;
        color: #fff;
        font-size: 14pt;
        padding: 5px;
        margin: 10px;
        height: 100%;
        width: 100%;
    }</ui:style>

<g:DockLayoutPanel unit='PCT'> 
        <g:north size='10'> 
                <g:Label addStyleNames="{style.label}">Top</g:Label> 
        </g:north> 
        <g:center> 
                <g:Label addStyleNames="{style.label}">Body</g:Label> 
        </g:center> 
        <g:west size='10'> 
                <g:Label addStyleNames="{style.label}">West</g:Label> 
        </g:west> 
        <g:south size="10"> 
                <g:Label addStyleNames="{style.label}">South</g:Label> 
        </g:south> 
</g:DockLayoutPanel>

2 голосов
/ 22 декабря 2011

Добавьте маржу к родительскому элементу вашей DockLayoutPanel. Например, если вы добавляете DockLayoutPanel в RootLayoutPanel: 

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
RootLayoutPanel rootPanel = RootLayoutPanel.get();
rootPanel.setStylePrimaryName("rootLayoutPanel");
rootPanel.add(dockLayoutPanel);

И добавить CSS 

.rootLayoutPanel {
    margin: 5px;
}
...