Does anyone know if there are plans to improve the tab width property of the tab container? As mentioned in this thread, the width of the tabs are currently not able to expand wider than 160 pixels (I’m using 8.1.9). It would also be pretty useful to have some sort of dynamic width be a possibility, like a way to evenly split the width of the container between the number of tabs present.
1 Like
@PGriffith Is there any update on this?
No; it’s still on the backlog.
As a workaround I think you could use @victordcq’s style “injection” trick to override the max-width: 10rem declaration the component adds, but I’m not positive of that.
1 Like
It is just CSS, I don’t know why I didn’t realize this right away… Thanks @PGriffith!
here ya go:
Seems you might also want to overwrite the flex basis; (i advice to auto)
the default theme.css:
[data-component="ia.container.tab"] .tab-menu .tab-menu-item { min-width: 2rem; max-width: 10rem; flex: 0 1 96px !important;}
with injection you can get it like this (paste into style class background image prop with }{ around the css):
}[data-component="ia.container.tab"] .tab-menu .tab-menu-item { min-width: 2rem; max-width: 10rem; flex: 0 1 96px !important;}{
I’ve also set the min a bit higher here so you can see:
}[data-component="ia.container.tab"] .tab-menu .tab-menu-item { min-width: 6rem; max-width: 46rem; flex: 0 1 auto !important; }{
5 Likes
As always, Victor comes in with the CSS workaround. 
2 Likes
I may be a little slow, but I can’t seem to get this hack to work on v8.1.14… did something change? Also, you’re modifying the backgroundImage of the top level Top Container, correct?
EDIT: I looked at the screenshot closer and realized that I needed to create a style class for this injection trick. Got it working, thanks!
I believe in Victor’s screenshot he is creating a separate style class, not directly editing the component style. Ultimately, I don’t know if that would make a difference? As long as the CSS injection ends up with the rest of the CSS for the project I would imagine it should still work.
I just figured this out right before you posted… Thanks @swolnisty!
Haha, perfect timing.
Yes it matters, properties in the designer are handled by javascript. While the ones in the styleclasses are turned into css (i think).
And thank the security team that js injection of properties doesnt work because that would have been a mayor security flaw, while this css injection is harmless.
1 Like
I just installed Ignition 8.1.16 to my own test environment and happened to notice that the max tab width no longer has the 10rem max restriction. I’m not positive which version this was implemented, since I don’t recall ever seeing it listed in any of the release notes since this thread was last updated. Just figured I’d post a final update to this topic for anyone searching the topic in the future.
Looks like this changed in 8.1.16.
1 Like
I’m always happy to see improvements made, even if they’re not listed in the release notes!