# Perspective: Tab container text not centred when small

**URL:** <https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545>\
**Category:** Ignition\
**Tags:** ignition80, perspective\
**Created:** [September 10, 2020, 6:33am UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545 "2020-09-10T06:33:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 10, 2020, 6:33am UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545/1 "2020-09-10T06:33:13Z")

</div>

v8.0.15

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)?  
Small:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/7/17c4e442bc37da77cde096e64d752f5d911dea43.png)

Large:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/3/2330c6352ef9385486d9ab4532a9c13d0d86a621.png)

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 10, 2020, 11:39pm UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545/2 "2020-09-10T23:39:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 10, 2020, 11:46pm UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545/3 "2020-09-10T23:46:24Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 11, 2020, 12:14am UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545/4 "2020-09-11T00:14:00Z")

</div>

> [@nminchin](#):
>
> hmm, I found the css file for it but I can’t see any mention of ‘center’ or ‘padding’ 🤔

Did you try adding your own?

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 11, 2020, 12:28am UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545/5 "2020-09-11T00:28:41Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 11, 2020, 2:13am UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545/6 "2020-09-11T02:13:51Z")

</div>

> [@nminchin](#):
>
> is there an easier way to re-read the them styles?

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

> [@nminchin](#):
>
> padding-left: 0px

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

---

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 11, 2020, 2:47am UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545/7 "2020-09-11T02:47:38Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![kgamble](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/kgamble/32/8019_2.png) [@kgamble](https://forum.inductiveautomation.com/u/kgamble)\
**Post date:** [September 11, 2020, 2:59am UTC](https://forum.inductiveautomation.com/t/perspective-tab-container-text-not-centred-when-small/38545/8 "2020-09-11T02:59:40Z")

</div>

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
