Perspective tabsSize dynamic width

[Seth_Hexum]

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.

[PGriffith]

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.

[victordcq]

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

[IGN-1831]Tab Container Tab Width

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’v…

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

[Seth_Hexum]

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?

[victordcq]

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

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

[Seth_Hexum]

@victordcq

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

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

[marcg]

@victordcq

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

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

[victordcq]

icon? like "Producing Loc..." ?

[marcg]

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?

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

[victordcq]

@marcg

i mean when its too long,

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="ia.container.tab"] with .psc-YourClassName or #YourDomId

[marcg]

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

[victordcq]

yes, by injection xd

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

[marcg]

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

[victordcq]

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

you can use this

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

both can be combined