Tab Alignment Inside Tabsheet


By default Tabsheet aligns its tab’s to Top left corner, is there any way to align tabs bottom left corner.
Find the image attached, the tabs marked
are tabs which gets aligned to the top left corner by default, my requirement is to get the Tabs to the bottom left corner as marked in

I have nested Tabsheet. So I need the parent tabsheet tabs to be aligned at the bottom and the child tabs at the top.
Is there a way I could do this in vaadin or using CSS?


Well, it would get rather tricky. The tab container and the content area are rendered as successive divs vertically, so you’d need to change the order somehow. There are
some ways to do that
, some more tricky than others. The brute way would be to use absolute positioning (“position: absolute; top: ___px;”), but that requires that the content has fixed size. The “display: flex” together with order attributes for the two divs might also work, but could be tricky and might not work in all browsers so well.