Как установить 5% -ный запас при использовании RootLayoutPanel и DockPanel

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

Как я могу достичь того, что я хочу использовать GWT?

источник

2010-01-24 Ruggs

Из-за того, что вы читаете свой вопрос, неясно, что вы спрашиваете, но я думаю, вы хотите, чтобы вся панель 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>

источник

2010-01-25 02:34:28 filsa

Я чувствую себя немного глупо на данный момент, но вместо того, чтобы использовать ширину 90% и маржу: 0 авто; Я переключился на то, чтобы дать панели макета документа. Кажется, работает до сих пор в ie6/ie8/firefox 3.5. Поскольку вы единственный, кто опубликован, и у вас есть интересная идея, вы получаете голосование и ответ. Благодарю. – Ruggs

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

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

и добавить CSS

.rootLayoutPanel { 
    margin: 5px; 
}

источник

2011-12-22 16:05:37 Andrey

Как установить 5% -ный запас при использовании RootLayoutPanel и DockPanel

ответ

Смежные вопросы