# Stacked Tab Container

**URL:** <https://forum.inductiveautomation.com/t/stacked-tab-container/95710>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [September 9, 2024, 7:41am UTC](https://forum.inductiveautomation.com/t/stacked-tab-container/95710 "2024-09-09T07:41:43Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![nminchin](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nminchin/32/6911_2.png) [@nminchin](https://forum.inductiveautomation.com/u/nminchin)\
**Post date:** [September 9, 2024, 7:41am UTC](https://forum.inductiveautomation.com/t/stacked-tab-container/95710/1 "2024-09-09T07:41:43Z")

</div>

For mobile clients, it would be useful to be able to have stacked tabs. I.e. where the page width is large enough, tabs would be on a single row. Where the page width is _not_ wide enough, then the tabs that don't fit will "wrap" onto the next row.

Terrible Paint job...  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/9523f14a239a066741c38e740242fe2c73cb6b98.png)

The current arrow scroll thing is not very useable, and I will _always_ avoid displaying this at all costs (I will shorten tab text so that it doesn't show - actually maybe this is only in Vision...)

Edit:  
I kinda got this working..  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/0/30a7e670980b0a812306c46bc891d96ae3f2909c.png)  
I simply added:

```python
menuStyle.flexFlow: wrap
tabSize.height: 72

```

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 9, 2024, 7:50am UTC](https://forum.inductiveautomation.com/t/stacked-tab-container/95710/2 "2024-09-09T07:50:37Z")

</div>

you can try something like this:

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

edit: Well you had the same idea ;p  
Put some css varnish on it and it should look good.

---

<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:** [September 9, 2024, 8:45am UTC](https://forum.inductiveautomation.com/t/stacked-tab-container/95710/3 "2024-09-09T08:45:19Z")

</div>

> [@nminchin](#):
>
> `tabSize.height: 72`

this param seems to be used in several places, at first sight it doesnt seem like you will be able to just replace this with auto or something for a truly dynamic wrap, since now you will only have 2 rows max. (well before a scroll bar appears atleast)

dont have time atm to look into it

---

<div class="post-metadata">

**Author:** ![pascal.fragnoud](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pascal.fragnoud/32/24728_2.png) [@pascal.fragnoud](https://forum.inductiveautomation.com/u/pascal.fragnoud)\
**Post date:** [September 9, 2024, 8:51am UTC](https://forum.inductiveautomation.com/t/stacked-tab-container/95710/4 "2024-09-09T08:51:34Z")

</div>

`flex-basis: auto` in the `menuStyle` seemed to allow it to grow as needed when I tried it earlier.

---

<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:** [September 9, 2024, 9:03am UTC](https://forum.inductiveautomation.com/t/stacked-tab-container/95710/5 "2024-09-09T09:03:20Z")

</div>

the frame underneath the tab doesnt appear to have shrik scaling, so if you put a view into it the view might get a scrollbar unexpectaly (i think, i have not tested it but thats what it looks like at first sight in css)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/f/df6ef74e8b194c462d26ae955b8e423ad5646696.png)  
(the 36 is tabSize.height param)

---

<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:** [September 9, 2024, 1:50pm UTC](https://forum.inductiveautomation.com/t/stacked-tab-container/95710/6 "2024-09-09T13:50:07Z")

</div>

Yeah you'll have to add a shrink.  
Also the properties seem to not get passed to the browser, just the desinger

so adding a class like tabwrap to the tabcontainer should do

```python
.psc-tabwrap .tab-menu {
    flex-wrap:wrap;
    flex-basis:auto !important;    
}
.psc-tabwrap .content-frame {
    flex-shrink:1 !important    
}

```