horizontal scrollbar appears just for a moment then disappears - gwt

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.

Related

DockLayoutPanel issues with text wrapping

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.

GWT: How to embed a SimplePager into a DataGrid

Currently, DataGrid doesn't include a SimplePager. One must create a composite and wrap a grid and a pager into a FlowPanel. Is there a way you can create a wrapper CDataGrid (that extends DataGrid) that includes SimplePager?
I think that you can use UiBinder to make this possible, you can check at the showcase sample here that shows this:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:c="urn:import:com.google.gwt.user.cellview.client">
<g:DockLayoutPanel
unit="EM">
<!-- DataGrid. -->
<g:center>
<c:DataGrid
ui:field='dataGrid' />
</g:center>
<!-- Pager. -->
<g:south
size="3">
<g:HTMLPanel>
<table
style="width:100%">
<tr>
<td
align='center'>
<c:SimplePager
ui:field='pager' />
</td>
</tr>
</table>
</g:HTMLPanel>
</g:south>
</g:DockLayoutPanel>
</ui:UiBinder>
You can wrap a DataGrid with SimplePager or whatever do you wish, and make a new "Widget" called "CDataGrid" (as you said) that not extends DataGrid but can extends Composite.
I hope I can give you a little help with this.
Best Regards,
iVieL.
It does integrate with DateGrid.
Take a look at the showcase for an example:
http://gwt.google.com/samples/Showcase/Showcase.html#!CwDataGrid
Adding pager as a part of the Grid, eliminates extra markup and steps in Compositve View. My solution was to create a new composite and provide callbacks.

gwt decorated tab panel not showing the tabs properly

I have create a DecoratedTabPanel in GWT
<g:HorizontalPanel ui:field="hpnlTab">
<g:DecoratedTabPanel animationEnabled="true" ui:field="tabQuran" width="499px" height="281px">
<g:Tab text="Quran">
<g:HTMLPanel width="249px" height="262px" ui:field="quranTab">
<!-- <div class="{style.qFrameMiddle}" id="middleFrame">-->
<div ui:field="quranText" class="{style.quranText}">
</div>
</g:HTMLPanel>
</g:Tab>
<g:Tab text="Translation">
<g:HTMLPanel width="7cm" height="249px"/>
</g:Tab>
</g:DecoratedTabPanel>
</g:HorizontalPanel>
Its working fine , showing the word Testing, when i click on testing, its also opens the HtmlPanel , but the problem is , its not showing TABS, just a simple text, see the image
thanks
Make sure in your ModuleName.gwt.xml has inherited standard theme or another one:
<inherits name="com.google.gwt.user.theme.standard.Standard"/>
Or you are somewhere overriding its default styles.

Embeding a TabLayoutPanel inside a DockLayoutPanel

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);

How can I vertically center an element with GWT?

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