css nested tab container

0
I am trying to change the color of my nested tab container. I'd also like to show a different color for the active main tab and the active nested tab. I've tried the below to achieve the color of all nested tabs, but it does not appear to be working. .dijitTabContainerTabListNested { color:red; }
asked
3 answers
2

Hi Tracy,

First things first. Did you use the out-of-the-box tabcontainer widget from Mendix or a different custom Widget? If you've used the standard one the classname .dijitTabContainerTabListNested is not one that actually exists. You can inspect this either in the modeller or via a browser inspector and look at the HTML part of the tabcontainer. I'd recommend using the standard Mendix one by the way and will give you the answer for that one.

Although Allard answer would work as well (not sure where the a.main-tab class comes from though), I strongly recommend postponing custom classnames on widgets until you can't do without. Targeting a nested tabcontainer is actually pretty easy. Just add another selector like this:

.mx-tabcontainer .mx-tabcontainer {
/* just add come fancy css here */
}

We've just targeted every tabcontainer that is a child of a tabcontainer (doesn't have to be a direct child). So if we want to change the color of a normal active tab we would use: 

  .mx-tabcontainer .mx-tabcontainer-tabs > li.active > a {
    /* fancy css coloring to be done here */
    }

To change the nested active tab just put .mx-tabcontainer before that one like so:

.mx-tabcontainer .mx-tabcontainer .mx-tabcontainer-tabs > li.active > a {
/* some more fancy css coloring to be done */
}

And then you're all set. Good luck and good modelling.

answered
1

Hi Tracy,

You could try to add the following CSS to your custom stylesheet. You then need to add the class 'nested-tabcontainer' to the nested tab container, and the class 'main-tab' to the main tab of your tab container. This will give the active tab a red background, and the main tab a green background (unless it is active, it will then get the red background color).

.mx-tabcontainer.nested-tabcontainer > .mx-tabcontainer-tabs > li.active > a,
.mx-tabcontainer.nested-tabcontainer > .mx-tabcontainer-tabs > li.active > a.main-tab {
    background-color: red;
}

.mx-tabcontainer.nested-tabcontainer > .mx-tabcontainer-tabs > li > a.main-tab {
    background-color: green;
}

Hope this will be of any help to you!

answered
0

Probably is wrong but in the Kodi jsfiddle the nested tabs have the same ids of the outer tabs. The internal links Lucky Patcher & point to the "wroatcherng" container, updating the external one ShowBox ..

answered