To simplify things and help our users to be more productive, we have archived the current forum and focus our efforts on helping developers on Stack Overflow. You can post new questions on Stack Overflow or join our Discord channel.
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 red 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 black. 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.