CODEWITHSUNDEEP
gwt
klusark
klusark

Reputation: 21

TabLayoutPanel align tab to the right

I am using a TabLayoutPanel in GWT and I want to have the last tab show up on the right side of the page. Is it possible to do this?

Upvotes: 2

Views: 1887

Answers (5)

paulek
paulek

Reputation: 913

If you want to align all tabs to right try this:

.gwt-TabBar .gwt-TabBarFirst {
    width: 100%;
}

.gwt-TabBar .gwt-TabBarRest {
    width: 4px;
}

.gwt-TabBar .gwt-TabBarFirst-wrapper {
    width: 100%;
}

Upvotes: 1

Daimonion
Daimonion

Reputation: 61

Why not pure CSS solution ? It is good practice to separate your code from design.

.gwt-TabLayoutPanelTabs {
    width: auto!important;
}
.gwt-TabLayoutPanelTab {
    float: right;
}

Remember that your tabs will come in reverse order (first added will be first on the right)

Upvotes: 0

azabaluev
azabaluev

Reputation: 41

Common idea:

  1. set tab container width to "auto" instead of predefined "16384px"
  2. set "float: right" css property to last tab

  3. move last tab to firts position

    public void onModuleLoad() {
        .....
        // init TabLayoutPanel 
        .....
        Widget rightTab = tabPanel.getTabWidget(0).getParent();
        DOM.setStyleAttribute(rightTab.getElement(), "float", "right");
        Widget tabBar = rightTab.getParent();
        tabBar.setWidth("auto");
        tabPanel.selectTab(1);
}

Upvotes: 3

Boris Daich
Boris Daich

Reputation: 2461

Short Answer - NO.

I drilled down to the source at GWT 2.3 and AFAIK it easier to build your own composite from TabBar and StackLayoutPanel than start fighting this implementation.

Just to save you an effort it cannot be centered easily too. I am sorry it is like this.

it all hardcoded... 

private static final int BIG_ENOUGH_TO_NOT_WRAP = 16384;
private final FlowPanel tabBar = new FlowPanel(); 
...
tabBar.getElement().getStyle().setWidth(BIG_ENOUGH_TO_NOT_WRAP, Unit.PX);

Upvotes: 0

Rupeshit
Rupeshit

Reputation: 1466

It is possible and will be very easy if you create your own tab.Just create an png image of tab shape (which is having rounded corner at top).Write one css rule.Take one FlextTable and apply that css to each cell that will be your tabs and then add that FlexTable into another mainTable. So in your mainTable in first row there will be tabFlexTable and in second row whatever you want to display after selecting particular tab.So for the first row apply horizontal alignment to right. This the way and same way I am also using in my professional projects.

Upvotes: -1

Related Questions