1

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?

Diego
  • 462
  • 10
  • 26
  • Does the dock panel have a width parameter set? If not this may help. Also you can center the wrapper panel by adding a width and setting the margin options. I will update the answer. See here http://stackoverflow.com/questions/953918/how-to-align-a-div-to-the-middle-of-the-page – Chris Hinshaw Oct 17 '14 at 13:51

1 Answers1

1

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;

Chris Hinshaw
  • 6,967
  • 2
  • 39
  • 65
  • Thanks, but it didn't work. I edited the answer, in an effort to explain better my problem. My problem is that even if I center the DockPanel the component in the NORTH position seems to align left, so it appears to move when the components being displayed in CENTER change their width. – Diego Oct 17 '14 at 13:41
  • Thanks, I can't center the navigation bar on NORTH, but at least now it is not "sliding" every time that a new panel is selected. I will give this question some ore time, and if I cana't find a proper solution I will accept your answer as the most helpful. Thanks again. – Diego Oct 17 '14 at 14:23
  • You should try opening up the developer tools of the browser and looking at the layout. You can also tweak the styles right there to get them right. The parent container of the simple panel needs to have a width set on it also. If it has a width then the wrapper should be centered. – Chris Hinshaw Oct 17 '14 at 14:37
  • Yes, thanks. I usually play with the developer tools and the place those properties in the UI Binder or CSS. I think I managed a decent solution by setting a width for the DockPanel and the navigation bar component, and adding padding on both sides to the latter. So, I think it can stay like that so I can move to more meaningful parts of the app. Thanks again. – Diego Oct 17 '14 at 14:43
  • And I could use some voting, if you deem the question worth it. – Diego Oct 17 '14 at 14:58