# Multiple Tab Strips - Consistent Tab Button Sizing

**URL:** <https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230>\
**Category:** Ignition\
**Tags:** ignition81, vision\
**Created:** [October 31, 2023, 1:45pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230 "2023-10-31T13:45:46Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [October 31, 2023, 1:45pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230/1 "2023-10-31T13:45:46Z")

</div>

For those who are looking to use multiple tab strips for tier navigation, or other things, I wanted to share a quick tip because getting them all to size the same between the different strips can be a hassle if display names change, etc.

What I've done is created an extra, disabled tab at the very end of the strip that has transparent background color. It's display name is

```auto
<html><font style="font-size:0px">long display name - tab size is deteremined by the maximum display name and the text padding. This display name is very long to ensure it is the longest in tab data, that way text padding between tab strips can be consistent.</font><html><html><html><html><html><html><html><html><html><html><html>

```

I've figured out that when using the Automatic size mode, the size is dictated by the longest display name, including html characters, which are of course not shown on the actual button itself. So, by creating a display name which will always be the max, the Text Padding can now be set to whatever negative number you need to get the tab buttons to be the correct size, on all of the tab strips. In my case, it was `-1,824`. Now, you can change the contents of the _actual_ tabs that are being used without the tab buttons changing size.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 31, 2023, 5:02pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230/2 "2023-10-31T17:02:29Z")

</div>

Clever workaround! For what it's worth, we're tracking the core issue here ("the size is dictated by the longest display name, including html characters, which are of course not shown on the actual button itself") as a bug internally. Rather than attempt to parse out the HTML characters though, we're just going to introduce a manual width field you can populate in your tab attributes dataset.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [October 31, 2023, 5:03pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230/3 "2023-10-31T17:03:41Z")

</div>

Hah! No wonder you knew what the issue was, you're the one who originally reported it 😆

> [@\[BUG-5664\] Tab Strip Size](https://forum.inductiveautomation.com/t/bug-5664-tab-strip-size/56788):
>
> When using HTML to format the Display Name property for tabs in a tab strip (for example, forcing a line break), it seems to count the html formatting towards the calculation of the tab’s width. So now I have to set some ridiculously large negative number for the text padding to shrink the width back down. If Ignition is able to recognize the \<html\>, \<center\>, and \<br\> keys and not display them, it should also be able to discount them from the char total when calculating the tab width.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [October 31, 2023, 5:06pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230/4 "2023-10-31T17:06:21Z")

</div>

Yep! I had been fighting with the final button size for a while and was sick of it.

---

<div class="post-metadata">

**Author:** ![Ryan\_Gibbs](https://avatars.discourse-cdn.com/v4/letter/r/90db22/32.png) [@Ryan\_Gibbs](https://forum.inductiveautomation.com/u/Ryan_Gibbs)\
**Post date:** [November 15, 2023, 8:39pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230/5 "2023-11-15T20:39:10Z")

</div>

I'm just working on a Vision project standard and being able to have a fixed tab width would be very useful.

---

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [November 15, 2023, 9:06pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230/6 "2023-11-15T21:06:17Z")

</div>

What I've started doing is using one button at the very end that's display name is

`<html><html><html><html><html><html><html><html><html><html><html><html><html><html><html><html>`

and then use an internal property on the root container and bind it to the text spacing. Make it as negative as you need it to be. This will essentially fix the width as long as other display names are shorter than that `<html><html><html><html>...`

Then change the appearance of that button to hide it and disable it in the tab data dataset.

---

<div class="post-metadata">

**Author:** ![cs\_tractor](https://avatars.discourse-cdn.com/v4/letter/c/919ad9/32.png) [@cs\_tractor](https://forum.inductiveautomation.com/u/cs_tractor)\
**Post date:** [March 4, 2025, 10:00pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230/7 "2025-03-04T22:00:54Z")

</div>

@paul-griffith do you know if this issue will be fixed soon or if it will be included in the 8.3 release? Would the manual width field be applicable to individual size mode? So you could specify the width of each tab individually.

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [March 4, 2025, 11:03pm UTC](https://forum.inductiveautomation.com/t/multiple-tab-strips-consistent-tab-button-sizing/81230/8 "2025-03-04T23:03:17Z")

</div>

The planned fix is to add support for a 'width' column to the tab attributes dataset.

However, I can guarantee you it's not going to happen anytime soon, and hasn't been done with other 8.3 work. Adding new features to fix edge cases in Vision is just inherently lower priority than lots of other work.
