Perspective tabsSize dynamic width


I am wondering if there is a way to make tabs in Perspective automatically resize based on the length of the header name. My current tab group is 21 tabs long, and the tab names get cut short based on a static tabsize. I am new to perspective and can't find any helpful information on this.

If you use a view to render the tab, you can pass an individual width as part of the config object. This doesn't appear to be in the documentation, but is supported by the code. I'm not sure why you can't override an individual tab width with regular text rendering, but e.g. @victordcq might have a convenient way to hack in a width with CSS.

I solved it here before :slight_smile:
You can use the new css editor if you use the newest version too :wink:

[data-component=""] .tab-menu .tab-menu-item { min-width: 6rem; max-width: 46rem; flex: 0 1 auto !important; }


Thanks for the tip with the CSS style. Doing this helped so that it doesn't all try to fit within the page. There is now a scroll bar, which is nice but it still doesn't allow for longer tab names to fit within the headers. They get cut off and still do not show the entire name. Do you know a way to adjust this or another workaround?

1 Like

What do you want to happen instead of a scrollbar?
a scroll over all the tabs?

[data-component=""] .tab-menu .tab-menu-item { min-width: 6rem; max-width: 46rem; flex: 0 0 auto !important; }

1 Like

That one worked for me. Changing the flex property from 1 to 0 seemed to do it. Thanks!


hi sir is it possible to put icon instead of scroll bar?

icon? like "Producing Loc..." ?

i mean when its too long, also your fix for tab container updating all my tab container in project, is there any way i can only apply this to a specific component?

[data-component=""] .tab-menu .tab-menu-item { min-width: 6rem; max-width: 46rem; flex: 0 0 auto !important; }

when the text is to long you want to see "..."? or do you want to replace the text with an svg icon?

yes its possible to target only the one component by adding a class or domId

you can replace [data-component=""] with .psc-YourClassName or #YourDomId

so i need to make my own style class right? isee, is there any way that i can directly write the css in the ignition designer, like the inject type you made

yes, by injection xd

}.psc-thisTabStyle .tab-menu .tab-menu-item { min-width: 6rem; max-width: 46rem; flex: 0 0 auto !important; }{

i see, sorry im not used to css, thanks i understand now, appreciated the help sir! :face_with_monocle:

1 Like

no problem :slight_smile:
if you instead want the "..."

you can use this

[data-component=""] .tab-menu .tab-menu-item span {
    overflow: hidden;
    text-overflow: ellipsis;


both can be combined