Perspective: Tab container text not centred when small


See below, tab label text isn’t centred when the display is small, however it appears to be centred when larger. I have tried changing the style text alignment to centre but it doesn’t affect it (tried changing to left and right as well, still no effect). That leads me to believe that the text is forced to centred in the default style class and has a left-side padding which can’t be altered via the Designer styles (I tried changing the padding as well with no effect)?


I would try taking a look at the theme file that handles the tab container tabs.

I don’t remember the specific one off hand, but if there was anything built into the default style it would be there

hmm, I found the css file for it but I can’t see any mention of ‘center’ or ‘padding’ :thinking:

As a side note, I didn’t realise you can use css variables in the designer styles :slight_smile: that’s cool!

1 Like

Did you try adding your own?

Yep, no luck.

I added to the .ia_tabContainerComponent__tab--modern { style and refreshed it in the designer by changing the theme from and to (is there an easier way to re-read the them styles?) but it didn’t change. I tried adding padding-left: 0px; as well, no effect.
I should clarify that yes, I am using the modern style

the best way I have found is to close and re-open the specific view

Weird but see if you can give it a negative value? Or by modifying the margins property instead

Margins work, but it offsets the whole tab (as expected)

I tried setting the padding positive to like 20px but it had no effect, therefore negative probably won’t either but i’ll give it a shot. It’s a bit strange…

I’d say that if that doesn’t, it may be something in the way the tab-container component is actually implemented. I am sure @cmallonee may know, he seems to know all of the weird quirks of what theming can and can’t solve. hahaha