TabLayoutPanel at the bottom of the page in GWT

Question

I would like to know if It is possible to have a TabLayoutPanel at the very bottom of a page in GWT, unfortunately there is a so little documentation online.

Answer 1

Yes it is possible. The easiest way is to use a DockLayoutPanel region. You should wrap the TabLayoutPanel in another LayoutPanel to make sure your content will display correctly otherwise you must add a height to your TabLayoutPanel. I typed this from memory but the syntax should be correct.

<DockLayoutPanel unit="PX">
  <g:south size="200">
     <g:TabLayoutPanel barHeight="30" barUnit="PX">
        <g:tab>
           <g:header>Tab 1</g:header>
           <g:Label> Tab 1 content</g:Label>
        </g:tab>
        <g:tab>
           <g:header>Tab 2</g:header>
           <g:Label>Tab 2 content</g:Label>
        </g:tab>
    </g:TabLayoutPanel>
  </g:south>
  <g:center>
     <g:FlowPanel>
        <g:Label>Main page content</g:Label>
     </g:FlowPanel>
  <g:center>
</DockLayoutPanel>

Answer 2

Not very elegant, but it works:

public class BottomLabLayoutPanel extends TabLayoutPanel
{
    public BottomLabLayoutPanel(double barHeight, Unit barUnit)
    {
        super(barHeight, barUnit);

        LayoutPanel panel = (LayoutPanel)getWidget();
        if (panel.getWidgetCount() >= 2)
        {
            Widget w1 = panel.getWidget(0);
            Widget w2 = panel.getWidget(1);
            Element e1 = w1.getElement().getParentElement();
            Element e2 = w2.getElement().getParentElement();
            if (e1 != null)
                e1.setClassName("BottomTabLayoutPanel TabPanel");
            if (e2 != null)
                e2.setClassName("BottomTabLayoutPanel ContentPanel");
        }
    }
}

In CSS:

.BottomTabLayoutPanel.TabPanel
{
    top: auto !important;
    bottom: 0px !important;
}

.BottomTabLayoutPanel.ContentPanel
{
    top: 0px !important;
    margin-bottom: 35px !important;
}