# Perspective tabsSize dynamic width

**URL:** <https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [October 10, 2022, 2:53pm UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010 "2022-10-10T14:53:23Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![Seth\_Hexum](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@Seth\_Hexum](https://forum.inductiveautomation.com/u/Seth_Hexum)\
**Post date:** [October 10, 2022, 2:53pm UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/1 "2022-10-10T14:53:23Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/6/86a56eeb293f50b81e9c42dc9dac13adf2438e8f.png)

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.

---

<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 10, 2022, 3:31pm UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/2 "2022-10-10T15:31:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 11, 2022, 6:27am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/3 "2022-10-11T06:27:59Z")

</div>

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](https://forum.inductiveautomation.com/t/ign-1831-tab-container-tab-width/52071/5):
>
> 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…

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

```

---

<div class="post-metadata">

**Author:** ![Seth\_Hexum](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@Seth\_Hexum](https://forum.inductiveautomation.com/u/Seth_Hexum)\
**Post date:** [October 11, 2022, 1:17pm UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/4 "2022-10-11T13:17:39Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/b/bbda2be33558e9a1dcf1df0050ffa7f354bd2a86.png)

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?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [October 11, 2022, 1:22pm UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/5 "2022-10-11T13:22:59Z")

</div>

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; }`  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7cf308f120362ba4e4a09bc4c632f0b61eb67d01.png)

---

<div class="post-metadata">

**Author:** ![Seth\_Hexum](https://avatars.discourse-cdn.com/v4/letter/s/c89c15/32.png) [@Seth\_Hexum](https://forum.inductiveautomation.com/u/Seth_Hexum)\
**Post date:** [October 11, 2022, 1:48pm UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/6 "2022-10-11T13:48:42Z")

</div>

> [@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!

---

<div class="post-metadata">

**Author:** ![marcg](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@marcg](https://forum.inductiveautomation.com/u/marcg)\
**Post date:** [May 4, 2023, 8:37am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/7 "2023-05-04T08:37:06Z")

</div>

> [@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?

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/c/cc777b0405231a9544c07e1d4e0d9c574d41ce30.png)

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 4, 2023, 8:47am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/8 "2023-05-04T08:47:43Z")

</div>

icon? like "Producing Loc..." ?

---

<div class="post-metadata">

**Author:** ![marcg](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@marcg](https://forum.inductiveautomation.com/u/marcg)\
**Post date:** [May 4, 2023, 8:48am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/9 "2023-05-04T08:48:50Z")

</div>

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; }

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 4, 2023, 8:54am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/10 "2023-05-04T08:54:12Z")

</div>

> [@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`

---

<div class="post-metadata">

**Author:** ![marcg](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@marcg](https://forum.inductiveautomation.com/u/marcg)\
**Post date:** [May 4, 2023, 8:56am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/11 "2023-05-04T08:56:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 4, 2023, 8:59am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/12 "2023-05-04T08:59:11Z")

</div>

yes, by injection xd

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

```

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/3/f36d1d5326cf6ebe279be5e4383729be8f98aa69.png)

---

<div class="post-metadata">

**Author:** ![marcg](https://avatars.discourse-cdn.com/v4/letter/m/bb73d2/32.png) [@marcg](https://forum.inductiveautomation.com/u/marcg)\
**Post date:** [May 4, 2023, 9:00am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/13 "2023-05-04T09:00:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [May 4, 2023, 9:06am UTC](https://forum.inductiveautomation.com/t/perspective-tabssize-dynamic-width/65010/14 "2023-05-04T09:06:10Z")

</div>

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

you can use this

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

```

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/a/da8a81dc8048f9df81671210fd1223d74570500b.png)

both can be combined