So I am using a dock layout panel. In the north I have a title and menubar and center has a table. My problem is when the title gets long and wraps the text, it pushed the menubar down and you can no longer see it. This is because you have to set fixed sizes for all panels except center.
I thought about moving it all to center panel but the problem is that when my table gets big and a scroll bar appears I want to always see the header and menubar even when scrolling on the table. So I cant just put everything in scroll panel.
How can I create a layout that fills these requirements: 1. Always see the title and menubar 2. Scrollable table 3. When the window is resized and text from title wraps it resizes the whole thing correctly.
here is Layout right now:
<g:DockLayoutPanel >
<g:north size="80">
<g:VerticalPanel width="100%">
<g:HorizontalPanel width="100%">
<g:HTML ui:field="title" styleName="{style.title}"></g:HTML>
</g:HorizontalPanel>
<g:HorizontalPanel styleName="{style.infoBar}" width="100%">
<g:MenuBar animationEnabled="true" styleName="{res.css.menuBar}" focusOnHoverEnabled="false" ui:field="menuBar"></g:MenuBar>
</g:HorizontalPanel>
</g:VerticalPanel>
</g:north>
<g:center>
<g:ScrollPanel>
<g:SimplePanel ui:field="content" styleName="{style.content}">Table or tree goes here
</g:SimplePanel>
</g:ScrollPanel>
</g:center>
<g:south size="20">
<g:VerticalPanel styleName="{style.footerPanel}">
<g:HTML ui:field="messageBar">Fotter text here</g:HTML>
</g:VerticalPanel>
</g:south>
</g:DockLayoutPanel>