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>
Have you tried to use two DockLayoutPanel?
The first has the title in the center area and in the south another DockLayoutPanel with the menu in the north area and the table in the center?
If title and menu may be shown underneath each other you can put title and menu in separate north-panels (that actually works).
With that you can at least ensure that the menu gets shown.
Related
Child view has DocLayoutPanel and Want to embed it into SimplePanel. center position is ScrollView and it is not displayed properly.
position in Parent View
<ui:SimplePanel ui:field="plageHolderID"/>
layout in Child view
<ui:Binder>
<g:DoclayoutPanel>
<g:north>
</g:north>
<g:center>
<g:ScrollPanel>
<g:VerticalPanel ui:field="paneForList">
<!-- Display List here-->
</g:VerticalPanel>
</g:ScorllPanel>
</g:center>
<g:south>
</g:south>
</ui:DoclayoutPanel>
</ui:Binder>
I am assuming you mean DockLayoutPanel.
The issue with the center not showing correctly is caused by the SimplePanel, which does not implement ProvidesResize.
DockLayoutPanel implements RequiresResize and therfore either needs to be placed in a panel, which implements ProvidesResize, or it needs to be given a specific height by calling [setSize()](http://www.gwtproject.org/javadoc/latest/com/google/gwt/user/client/ui/UIObject.html#setSize(java.lang.String, java.lang.String)).
I'm having an issue resizing the child widget inside a SplitLayoutPanel. I have a table in the South region of my layout. When I drag the splitter to increase the size the table doesn't resize. It stays at it's fixed height which causes white space under neath the table. When I shrink the South panel the table appears to "hide" behind the footer div image I have at the bottom of the Window. Is there a way to resize the table as the panel increases/decreases in size?
How I my South Panel is laid out. The "South" panel is real just the center panel filling out the rest of the space.
That center panel has a SimplePanel.
Attached to the SimplePanel is a LayoutPanel. I'm using that because there is a button bar above the table and SimplePanel only takes one Widget so I had to nest the widgets inside something else.
LayoutPanel's height and width are set to 100%
I'm guessing what needs to happen is the layout panel height needs to adjust. I'm not sure.
If need be I can post code. I'm also using the MVP/Activity/Places method
UPDATE
SplitLayoutPanel UI:
<g:SplitLayoutPanel>
<g:north size='250'>
. . .
</g:north size='250'>
<g:center>
<g:SimplePanel ui:field="south"/>
</g:center>
</g:SplitLayoutPanel>
Table Layout:
<g:LayoutPanel width="100%" height="100%">
<g:layer top='0px' height='125px'>
ButtonBar is here
</g:layer>
<g:layer top='30px' bottom='5px'>
<g:HorizontalPanel width="100%" height="100%">
<table:CustomTable height="500"/>
</g:HorizontalPanel>
</g:layer>
</g:LayoutPanel>
The Table Widget is placed into the center panel of the SplitLayoutPanel.
I have a complicated GWT question. Wish someone can give me some tips.
I want to create a panel that looks like in the following( content on the left, and some texts in the middle of the right side(tab), OR on the top of right side. (see the first picture)
Firstly, I considered the tab panel. but tap panel only has the horizontal tab on top. So this will not work unless I use third party libraries.
Then I tired the docklayoutpanel. but there is some problem as well. I put the content in mid, and put a label with some text in east. The height of the tab will be the same as the height of content. (see the 2nd picture). I dont like this. I dont want the white space shown up.
So does anyone have good idea about how to implement this kind of panel?
Thanks a lot.
Regards!
1st picture
|-------------------------|
|------- content ---------|---------|
|-------------------------|---tab---|
|-------------------------|---------|
| ------------------------|
2nd picture
|-------------------------|white space|
|------- content ---------|-----------|
|-------------------------|----tab----|
|-------------------------|-----------|
| ------------------------|white space|
Also, for the 2nd method, I tried to set the east area of docklayoutpanel to be transparent. But I did not know how to do this. and i am not sure if it will clean out the white space area.
Put the tabs in an "east" panel with height: 100%, and give it the background color you want. Put the main content in a "center" panel. Do not use "north" or "south".
If you want vertical centering for the tabs, then the easiest method is to use VerticalPanel with verticalAlignment="MIDDLE".
<ui:style>
.centerPanel { background-color: royalblue; }
.eastPanel { background-color: lightblue; width: 100%; height: 100%; }
</ui:style>
<g:DockLayoutPanel unit="EM">
<g:center>
<g:FlowPanel addStyleNames="{style.centerPanel}">
<g:Label>Content</g:Label>
</g:FlowPanel>
</g:center>
<g:east size="8">
<g:VerticalPanel addStyleNames="{style.eastPanel}"
verticalAlignment="MIDDLE">
<g:FlowPanel>
<g:Label>Tab1</g:Label>
<g:Label>Tab2</g:Label>
</g:FlowPanel>
</g:VerticalPanel>
</g:east>
</g:DockLayoutPanel>
The result looks like this:
My existing layout is a stack of two divs - g:layers in a LayoutPanel. The top div should be as big as it needs to be to contain its contents. The bottom div should take up the rest of the space on the screen, without causing scrollbars to appear.
The contents of the top div can change, so the size of the top div can change.
My current solution is a callback that's triggered whenever the contents of the top div change. The containing LayoutPanel can then recalculate the size of the top div and explicitly set the top and bottom attributes of the second layer to take up the rest of the space. Is there a better way? Something like,
<g:LayoutPanel>
<g:layer top="0px" height="whatever you need, baby">
<c:SomeWidget/>
</g:layer>
<g:layer top="the bottom of the first layer" bottom="0px">
<c:Anotherwidget/>
</g:layer>
</g:LayoutPanel>
What about using DockLayoutPanel?
<g:DockLayoutPanel unit='PX'>
<north size="10" ui:field='northWidget'>
<c:SomeWidget/>
</north>
<center>
<c:Anotherwidget/>
</center>
</g:DockLayoutPanel>
Then the center will take up the rest of the space. If you want to resize the top, call
setWidgetSize(northWidget, newSize); and the center widget will be recalculated.
The answer seems to be that there is not a better way. Manual recalculation isn't so bad when you get used to it!
I think HeaderPanel is the standard Widget to do this. Maybe it was added after the question was asked. We missed it too and had our own version for a while.
Perhaps I haven't been searching the right way but I cannot figure out for the life of me how to center an element using GWT Layout Panels.
I'm using UiBinder and I've tried all panels that implement HasVerticalAlignment (DockPanel, HorizontalPanel, VerticalPanel). None of them seem to have any impact from setting vertical alignment (or even horizontal). I've made sure they're taking 100% width and height, inspected the resulting DOM layout from my browser and nothing seems to be changed from those properties.
Pertinent UiBinder extract (with extra docklayout elements omitted):
<g:DockLayoutPanel>
<g:center>
<g:HorizontalPanel width="100%" height="100%" >
<g:FlexTable ui:field="homeData" />
</g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>
The quick and dirty fix I've figured out is to create my own "CenterPanel" widget which basically is a wrapper around a HTMLPanel with a HTML table with a valign="middle" cell. However, this basically feels like a throwback to the classical css-layout middle centering problems. Surely GWT has something to do this that I've completely overlooked?
Centering an item can be done with a cell element like this:
<g:HorizontalPanel width="100%" height="100%">
<g:cell horizontalAlignment="ALIGN_CENTER" verticalAlignment="ALIGN_MIDDLE">
<g:Label>Hello Center</g:Label>
</g:cell>
</g:HorizontalPanel>
Have you tried setting width less than 100% ... i feel the width of HorizontalPanel becomes 100% ... so it occupies whole DockLayoutPanel and thus the FlexTable might be getting left aligned.
You can use styleName attribute in your component. For Example:
<g:DockLayoutPanel>
<g:center>
<g:HorizontalPanel width="100%" height="100%" >
<g:FlexTable ui:field="homeData" styleName="verticalAlign"/>
</g:HorizontalPanel>
</g:center>
</g:DockLayoutPanel>
and have
.verticalAlign{
vertical-align: middle;
}
in your style.css