Tab container page header styling

0
Hi, I am currently using a Tab Container and have broken down a form into multiple groups that are shown in separate Tab pages. I have a requirement to color-code tab headers in the Tab Container and I’m bit struggling to do that.  We can style tab container on the whole to have a specific color through css and style configurations. But, there is no way to define a color for individual page headers that are part of a Tab Container. For example, here I need to color Page1 header as Blue and Page2 and Page3 headers as green. Has anyone worked on such a requirement or have any idea how this can be achieved? Thanks, Gaurish
asked
2 answers
2

Hi Gaurish,

Not sure if you are still looking for an answer, but this is my suggestion:

It depends on how dynamical your tab headers are. You can target the tab header with the name as Mendix adds a class to the tab-header containing the name:

.mx-name-tabPage1 { //if name is tabPage1
background: green;
}

Note that this way you target the link element (a) inside the tab header. I would recommend to make the call more specific using a class above the tabheader as the name is not unique throughout the application:

.class-of-specific-page .mx-name-tabPage1 { //if name is tabPage1
background: green;
}

As names could change by Mendix during the lifetime of your application, and if the order is fixed, you could also add colours depending on position, since the tabs are rendered as a list:

An example, to colour the first tabheader red and the second tabheader green:

.customtabclass > ul > li:nth-child(1){
background: red;
}

.customtabclass > ul > li:nth-child(2){
background: green;
}

If the tabs are even more dynamical, you could add a Class using JavaScript in a nanoflow on pageload or adding a HTMLSnippet on the page. Hope this helps!

Cheers,

Daan

answered
0

Hi Gaurish,

Add container inside of each tab and give the respective styling to the container

 

Thanks,

Bharathidasan

 

answered