Using WTabWidget Question

Added by Daniel Sanchez about 12 years ago

Hey everyone,

I just have a question regarding the use of WTabWidgets. I got mine to display perfectly, but I was wondering what had to be done to get the tabs to stretch across the entire width of a web page? Or even specify a specific width for each tab?

Also, I tried setting the alignment to centered on the root() container but the tabs still aligned all the way to the left. I'm still looking through the methods within WTabWidget but haven't found anything yet. What are the workarounds I have to use?

Thanks in advance!

Dan

Replies (2)

RE: Using WTabWidget Question - Added by Anonymous about 12 years ago

I've done this, but it may not the "best" way.

Firstly if you need to style a specific WTabWidget rather than all of them in your app, see this thread:

http://redmine.emweb.be/boards/2/topics/5765?r=5766#message-5766

To get the tabs to stretch I used a table layout in the CSS. Something like the following:

.MyMenuBarStyle .Wt-tabs ul 
{
    ...

    display: table;
    table-layout: fixed;
    width: 100%;
}

.MyMenuBarStyle .Wt-tabs .item, 
.MyMenuBarStyle .Wt-tabs .itemselected,
.MyMenuBarStyle .Wt-tabs .citem, 
.MyMenuBarStyle .Wt-tabs .citemselected
{
    ...

    display: table-cell;
};

I hope that's enough to get you moving!

Cheers,

Dan

RE: Using WTabWidget Question - Added by Koen Deforche about 12 years ago

Hey,

With the upcoming Wt release, a WMenuItem is a real widget (the result of addTab()), allowing you to set custom CSS style classes to easily customize a single item.

Regards,

koen

(1-2/2)

Project

General

Profile

Wt