Tabsheet caption icons displaced in Chrome

Hello everyone,

since my web application is now basically working, I’m testing it in different browsers. In 95% of all cases, Vaadin does an amazing job, it looks almost the same everyhwere.

With one weird exception.

Here’s the default-styled Reindeer tab sheet in action, as it looks in Internet Explorer:

… which is perfectly fine. However, here’s the very same screenshot made in Chrome:

Weird, isn’t it? Is this a “known bug” of some sort? Are there workarounds or fixes to this? As far as I can tell, this problem affects tab sheet caption icons only, all other icons are placed just fine in Chrome. I guess it would be simple to fix this by defining a custom CSS style, but CSS noob that I am I have little idea how to do this. I’d be grateful for any help :slight_smile:



Yes, we’re seeing the same issue in 7.1.8, and I believe it was there earlier, too.


please create a ticket about this at
. Should not even need a test case since this is visible in Vaadin Sampler also, so you can just reference that.

I created ticket 13077 to track this:

As a workaround, this CSS in my theme that overrides Reindeer seems to work (though the issue is only on Chrome, not Safari):

.v-webkit .v-tabsheet-tabitem .v-captiontext { vertical-align: middle; }

You can also use the .v-ch selector to target just Chrome and not Safari.

Thanks for the tip. Updated my CSS and it does seem to work fine for both.

David, can you show your updated CSS? Thanks

Sure, it’s just:

.v-ch .v-tabsheet-tabitem .v-captiontext { vertical-align: middle; }

Per the recommendation, we changed .v-webkit with .v-ch so it was targeted to Chrome specifically, though both work as the CSS is also fine for Safari on webkit.