Important Notice - Forums is archived
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.

Vaadin lets you build secure, UX-first PWAs entirely in Java.
Free ebook & tutorial.
Tabsheet - Tab Caption Alignment
Hi,
When i try to reduce the height of the Tabsheet bar where the Tabs Open, the Tab caption is getting offset. I tried CSS styling "vertical-align:middle" but caption not coming to the center of the Tab. Tried giving Padding from the bottom but of no use.
Please find the screenshot which shows my problem.
Also below shown is the CSS styling set for the Tabsheet. Is there a way I can reduce the bar height as well as Tab height without using styling?
.v-tabsheet-menu-Tabsheet {
.v-tabsheet-tabs {
height: 20px;
font-color: black;
font-weight: bold;
font-family: sans-serif;
vertical-align:top;
}
.v-tabsheet-tabitem .v-caption{
font-size:10px;
font-weight:bold;
font-family: sans-serif;
color: black;
text-transform: uppercase;
text-align:left;
vertical-align:top;
//padding : 0px 20px 10px 0px;
cursor: pointer;
}
}
I think it's enough just to set the line-height to the desired on in .v-tabsheet-tabitem .v-caption. Try it and tell me did it work. I just quickly tested on Chrome. Didn't try other browsers.
Yes it works for me
i tested in Chrome, Firefox, and IE worked in all these three
Thank you Mr Johannes Hayry