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
Related
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.
I am using UiBinder and a DockLayoutPanel as shown below. I am adding a custom CellTable to the ScrollPanel named "contentPanel".
When the CellTable is created for the first time, a horizonal scrollbar appears (along with the cellTableLoading.gif). Once the CellTable is finishing loading the horizontal scrollbar disappears.
How can I prevent the horizontal scrollbar from appearing in the first place?
I'd be happy to provide any other info that will help troubleshoot the problem. Many thanks!
<g:DockLayoutPanel unit='PX' styleName="{style.wrap}">
<g:north size='180'>
<g:HTMLPanel styleName='{style.header}'>
<g:Hyperlink ui:field="logoutLink" styleName="{style.login}"/>
</g:HTMLPanel>
</g:north>
<g:south size="70">
<g:HTMLPanel styleName="{style.footer}">
<g:Label>© Copyright by</g:Label>
</g:HTMLPanel>
</g:south>
<g:center>
<g:HTMLPanel styleName='{style.content}'>
<g:SimplePanel styleName='{style.left}' ui:field="navigationPanel" />
<g:ScrollPanel styleName='{style.right}' ui:field='contentPanel' />
<div style="clear: both;" ></div>
</g:HTMLPanel>
</g:center>
Impossible to tell why it happens without seeing the markup that's being generated and your CSS styles, but to turn off the scrollbars temporarily you can do the following:
// Before you load your table
contentPanel.getElement().getStyle().setOverflow(Overflow.HIDDEN);
// load your table
// ....
// after table is loaded
contentPanel.getElement().getStyle().setOverflow(Overflow.AUTO);
As a side note, you should also implement the panel inside <g:center> as a LayoutPanel instead of floated divs. It will give you a much more predictable layout:
<g:center>
<g:LayoutPanel styleName='{style.content}'>
<g:layer left="0" width="200px">
<g:SimplePanel styleName='{style.left}' ui:field="navigationPanel" />
</g:layer>
<g:layer right="0" left="200px">
<g:ScrollPanel styleName='{style.right}' ui:field='contentPanel' />
</g:layer>
</g:LayoutPanel>
</g:center>
You would also, obviously need to remove any box model related styles from .left and .right, like width and float.
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.
This image is showing but I can't resize it not matter the width or height values I use. Any thougt? Thankyou.
<ui:with field='res' type='com.hellomvp.client.resources.MyResources'/>
<ui:style>
.fortaImage { width:'50px'; height:'50px';}
</ui:style>
<g:DockLayoutPanel unit='EM'>
<g:north size="10">
<g:FlowPanel>
<g:Image styleName='{style.fortaImage}' resource='{res.fortaLogo}'/>
<g:InlineLabel>FortaService</g:InlineLabel>
<g:ListBox></g:ListBox>
<g:InlineLabel>DateIn</g:InlineLabel>
<d:DateBox></d:DateBox>
<g:InlineLabel>DateOut</g:InlineLabel>
<d:DateBox></d:DateBox>
<g:Button>Cerca</g:Button>
</g:FlowPanel>
</g:north>
</g:DockLayoutPanel>
When you use <g:Image resource="..."/>, GWT uses a background image. Background images cannot be resized in CSS 2.1. (I really wish it was possible!)
All you can do is either have a 50x50px version of the image on the server, or use <g:Image url="..."/> instead. This creates a normal <img src="..."/> instead of the background image, but you can't specify a ClientBundle resource here.
addStyleNames="{style.fortaImage}"
not
styleName='{style.fortaImage}'
I'm trying to embed a TabLayoutPanel inside a DockLayoutPanel but the tabs are not showing up :(
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<g:DockLayoutPanel unit='PX'>
<g:north size='200'>
<g:HTML>
<h1>
My Header
</h1>
</g:HTML>
</g:north>
<g:center>
<g:TabLayoutPanel barUnit='PX' barHeight='3'>
<g:tab>
<g:header size='7'>
<b>HTML</b>
header
</g:header>
<g:Label>able</g:Label>
</g:tab>
<g:tab>
<g:customHeader size='7'>
<g:Label>Custom header</g:Label>
</g:customHeader>
<g:Label>baker</g:Label>
</g:tab>
</g:TabLayoutPanel>
</g:center>
<g:west size='192'>
<g:HTML>
<ul>
<li>Sidebar</li>
<li>Sidebar</li>
<li>Sidebar</li>
</ul>
</g:HTML>
</g:west>
</g:DockLayoutPanel>
</ui:UiBinder>
If you're seeing nothing at all, make sure that the TabLayoutPanel either (a) has an explicit size, or (b) is ultimately attached to the RootLayoutPanel (see http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#Resize for more details).
If the problem is a lack of styling on the tabs (i.e., you're just seeing raw text where the tabs should be), you'll need to add some styles (the CSS rules you'll need are described in TabLayoutPanel's javadoc). There are not yet any default styles for TabLayoutPanel, but we'll be adding some soon.
The example from the JavaDoc is somewhat misleading - the bar height of 3 will hide the tab headings and a height needs to be specified for the body. Use something like:
<g:TabLayoutPanel barUnit='PX' barHeight='25' height="200px" >
or
<ui:style>
.tab {
height: 200px;
}
<g:TabLayoutPanel barUnit='PX' barHeight='25' styleName="{style.tab}" >
Also, you can find a basic CSS style for TabLayoutPanel on comment #5 in the following issue:
http://code.google.com/p/google-web-toolkit/issues/detail?id=4429
I have been having the same issue using the new TabLayoutPanel too (the tabs doesn't show up even if it's the only thing on the page). I decided to back to using the (now deprecated) TabPanel instead. Try and see if that works instead:
Example code:
<g:TabPanel width="100%" height="100%" ui:field="gwtimeTabPanel">
<g:Tab>
<g:TabHTML>Tab title</g:TabHTML>
<g:FlowPanel>
<!-- tab contents goes here -->
</g:FlowPanel>
</g:Tab>
</g:TabPanel>
For the people who mainly use Java code to define the UI.
Explenation
You should set the size of the parentpanel of the TabLayoutPanel and of the TabLayoutPanel itself. For instance I had a VerticalPanel and a TabLayoutPanel, I added this TabLayoutPanel to the VerticalPanel (which makes it the parentpanel of TabLayoutPanel) like this:
veticalPanel.add(tabLayoutPanel);
RootPanel.get().add(verticalPanel);
which did nothing...
Answer
you should declare the size of your panels like this
//set size
vertialPanel.setSize("100%","100%");
tabLayoutPanel.setSize("100%","100%")
RootPanel.get().add(verticalPanel);