verticle tab container option?

0
after talking with a client we thought that a certicle tab container would work quite well. is this a default in MX or would i have to make this myself? (think like how outlook works i guess, but than with buttons)
asked
3 answers
7

You could try doing this through CSS.  If you add a class to the tab container, say vtab, then you could try adding something like the following to your custom css file:
 

.vtab .mx-tabcontainer-tabs {
    transform: rotate(270deg);
    transform-origin: left;
    position: relative;
    top: 430px;
    margin-left: 6px;
}
.vtab .mx-tabcontainer-content {
    margin-left: 10px;
}
 
.vtab .mx-tabcontainer-pane {
    margin-left: 20px;
}

.vtab .nav-tabs {
    border-bottom: 0;
}

You may need to adjust the positioning elements above to suit your theme. It should end up looking something like this

Edit:

Updated CSS which gives slightly better results - the first tab is at the top:

.vtab {
	margin-top: -40px;
}
 
.vtab .mx-tabcontainer-tabs {
	transform: rotate(90deg);
	transform-origin: left;
	position: relative;
	margin-left: 6px;
	top: 24px;
}

.vtab .nav-tabs > li {
	transform: rotate(180deg);
}

.vtab .mx-tabcontainer-content {
	margin-left: 10px;
}
 
.vtab .mx-tabcontainer-pane {
	margin-left: 20px;
}

.vtab .nav-tabs {
	border-bottom: 0;
}

 

answered
0

Vertical tabs don't exist.

Think there are 2 solutions:
A list-view with a listen to list-view dataview.
An interface layout with a project navigation menu integrated in it on either the left or right side of a container, re-use the layout throughout the pages you wanted as "tabs" and link the menu to all these pages. 

 

answered
1

Hi Jason,

 

There is a custom widget for that that you can download from the appstore:
https://appstore.home.mendix.com/link/app/894/ - Tab Extension (Dynamic tab names, Buttons)

 

I haven't used it myself yet, but it does say it has vertical tabs :)

 

Please let me know if this works when you decide to try it!

 

Albert

answered