Same width tabs in a TabSheet. Reindereer Minimal. Vaadin 6.

Flow
1

Hi guys!

I’ve faced with (I think) the most popular problem with TabSheet. I have three tabs (that’s constant value and won’t be changed) and want them to be the same width. I’m using Reindereer theme, and MINIMAL style for TabSheet (btw it’s really cool, I like it). What I did is put this:

.white .v-tabsheet-tabs-minimal .v-tabsheet-tabitem {
width: 33% !important;
}

into my style.css file. But it doesn’t do the trick.

Could you pls give me some advices? Probably I’ve understood smth wrong. Thanks in advance.

2

Hi,

seems that percentage widths do not work there, could not determine the reason in a quick attempt. Would it be ok to use pixel widths instead? Those seem to work just fine.

-tepi

3

Thanks Teppo for your comment. Yes, pixel width works, but also this css

.v-tabsheet-tabitemcell {
width: 33%;
}

do the trick for me.

4

You can use this
tabsheet.addStyleName(ValoTheme.TABSHEET_EQUAL_WIDTH_TABS);

it works perfectly!

5

Thanks a lot, Jakub!

It really works perfectly! :slight_smile: