Tab container possible to give the tabs a color based on a value

0
I want to show different tabs in a tabcontainer and based on same value have it green or red. Offcourse this can be done via teh visibilty option but I hope there are better options.
asked
3 answers
1

You could try to use the set attribute widget.

https://appstore.home.mendix.com/link/app/5958/TimeSeries/Set-Attribute

Modifying the widget to be able to accept a parameter from the context would be needed. You would then use a css selector to find the tab and then set the background-color of the tab based off the parameter that is passed in from the context of the tab. I have not tried this but I would think that it is possible.

answered
1

Hi Andre,

An easy way to do this is using the CustomString widget: set 'Render value as HTML' to TRUE, and have a microflow per tabpage. Give your tab a unique name (ed ProductTab, or InvoiceTab) and have the microflow determine what styling the tab should get:

 

As the items get a class based on their name (.mx-name-TabName) you can target this to apply styling (eg give it a different background color).

answered
-1

Use the below code to set the color for active tab

mx-name-tabPage17 – This is the name of your tab inside the tab container.

.mx-tabcontainer .mx-tabcontainer-tabs > li.active > a.mx-name-tabPage17 {
    background: #0066cc !important;
    color: White !important;
    font-weight: bold;
    border-style: solid;
    border-color: #0066cc;
    background-color: #0066cc !important;
}

 

Below code will set the color during page load.

.mx-name-tabContainer2 .mx-name-tabPage12 {
    background: #BEBEBE ;
    color: White !important;
    border-style: solid;
    border-color: #ff9900;

}

answered