TabSheet setWidth as Percentage

Hi there,
I got a HorizontalLayoout containing multiple TabSheet components.
Depending on different things i am trying to set the width of this components.
Using Unit.Pixel works fine, but using Unit.Percentage works pretty strange.
So for example my first TabSheet contains only 1 tab and the TabSheet is set to 33% width.

<div class="v-slot" style="width: 33.3333%; margin-left: 0px;">
    <div class="v-ddwrapper v-widget v-has-width" style="width: 33%;">
        <div class="v-tabsheet v-widget v-has-width" style="overflow: hidden; width: 100%;">

As you can see can see the slot as well as the ddwrapper have the width of 33%. Which results in a rather small tab sheet.

This becomes worse when the TabSheet has multiple tabs.

<div class="v-slot" style="width: 33.3333%;">
    <div class="v-tabsheet v-widget v-has-width" style="overflow: hidden; width: 33%;">
        <div class="v-tabsheet-tabcontainer" style="width: 33%; overflow: hidden;">

In this case the tabcontainer has another 33% and is now even smaller as the whole slot.

I am setting the width as follows

   this.tabSheet1.setWidth(33, Unit.PERCENTAGE);

The HorizontalLayout containing the TabSheet is set to 100% width.

Is there something i am missing or am i doing something wrong?


seems like the lone tabsheet case is a bug in Vaadin. Looking at the code, the sizing for the v-tabsheet-tabcontainer is just taken as such from the main widget div - seems like someone has not though thinks through with % sizes. Please file a ticket about this at

For the case with a dnd wrapper, you should do the sizing so that you set the 33% width to the wrapper and then 100% width to the tabsheet. This seems to work correctly, meaning that the wrapper will get 33% of the width of the parent (full-width) horizontal layout, and the tabsheet will fill the dnd wrapper completely.

thanks for the answer.

But i also found a way to do the layout as i wanted it.
As i found out the v-slot does get the width setting from the expand ratio set by the horizontal layout.
By default this is set to 1 which results in 33.3333% when using 3 components.
So by using the percentage as expand ratio i get exactly the layout i wanted.

But i still doubt the stacking of the percentage in case of multiple tabs is intended.