CODEWITHSUNDEEP
javahtmlcssgwtdockpanel
Diego
Diego

Reputation: 472

How to style DockPanel.NORTH element independently of DockPanel.CENTER in GWT

In my GWT app I'm using a dock panel in which DockPanel.NORTH is a MenuBar component, implementing my navigation bar while the component in the DockPanel.CENTER position displays different panels according to the option selected in the navigation bar (is a DeckPanel).

My problem is that the navigation bar on DockPanel.NORTH is always aligned to the left. When the DeckPanel switches to a wider component the navigation bar moves too. So for each panel in the DeckPanel the navigation bar could be in a different position, which is annoying for the user. It would be great to me is this component in DockPanel.NORTH could be always centered, but it seems that I can center the DockPanel itself, but not the component in DockPanel.NORTH.

All the components in this DockPanel are styled with

.navigationPanel{
    margin-left: auto;
    margin-right: auto;
    text-align:justify;
}

The GWT UI Binder for the MenuBar item is:

<g:DockPanel>
    <g:Dock direction='NORTH' >
        <g:MenuBar ui:field="mainMenu"/>
    </g:Dock>
</g:DockPanel>

I have tried playing with other properties, like .setHorizontalAlignment(HasHorizontalAlignment.ALIGN_CENTER); with no success. Either, I haven't been able to tweak the right properties for the 

.gwt-MenuBar{
    align: center !important;
}

style property at the MenuBar component UiBinder interface.

Could anybody help me correct this behavior?

Upvotes: 1

Views: 454

Answers (1)

Chris Hinshaw
Chris Hinshaw

Reputation: 7285

Just a thought that may help don't know without seeing the whole template. Try wrapping the menu bar inside a SimplePanel or FlowPanel and add a style for display:block. This is just a guess as I am not completely sure what your problem looks like. You should also set a width on the DockPanel too, to keep it from resizing all the time. It would be best if it had a width so it knows initially where to center the menu bar. Otherwise it will move when the container grows or shrinks.

<style>

.menubar-wrapper {
  width: 100px;
  margin: 0 auto;
}
</style>


<g:DockPanel>
    <g:Dock direction='NORTH' >
        <g:SimplePanel styleName="{style.menubar-wrapper}">
            <g:MenuBar ui:field="mainMenu"/>
        </g:SimplePanel>
    </g:Dock>
</g:DockPanel>

If this doesn't help you may try to add a style to the menu bar for float:left;

Upvotes: 1

Related Questions