Multiple Tab Strips - Consistent Tab Button Sizing

Ignition
,
1

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

<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.

2 Likes
2

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.

2 Likes
3

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

1 Like
4

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

5

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

6

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.