Stacked Tab Container

Ignition
1

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

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
I simply added:

menuStyle.flexFlow: wrap
tabSize.height: 72
2 Likes
2

you can try something like this:

image

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

3

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

4

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

5

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
(the 36 is tabSize.height param)

6

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

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