Custom CSS Class for dijit/layout/ContentPane

Question

I want to add a custom CSS Class to a dijit/layout/ContentPane so I'm able to style it myself.

This is cause I got more than one tab in my TabContainer where my ContentPanes are located and I don't want to double the borders. Using a border all around the Tab will double the border so I removed the left border of the tabs. In the first tab in the TabContainer I need the left border, too.

To get this I tried to assume the first ContentPane a custom CSS class which will do it.

As you see me writing here, I didn't find a way to do this.

I tried it within the data-dojo-props with

<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" data-dojo-props="class:'firstTab'">

So this didn't work. I tried to add it like I do it in a simple HTML element with class="firstTab"

<div data-dojo-type="dijit/layout/ContentPane" title="FunnyTitle" class="firstTab">

Both ways didn't add my class to the ContentPane.

So how is it done?

Answer 1

It's that simple that I didn't get it.

All you need to do is adding an ID to the ContentPane.

Dojo generates a widgetID with it like "dijit_layout_TabContainer_0_tablist_myID"

If the TabContainer itself has an ID, it could be different. Just have a look at the generated code.

Now you're able to get it with dijit.byId.

At the end it looks something like:

var tab = dijit.byId("dijit_layout_TabContainer_0_tablist_myID");
domClass.add(tab.domNode,"myClassName");

domClass is a part of dojo. For using it you just need to require it "dojo/dom-class"

Answer 2

The class property is actually not used for that kind of purpose, but it used for identifying of which type the widget is.

However, the class attribute should work, because declarative widgets usually keep their parent attributes. If I have the following HTML:

It eventually gets rendered into:

<div class="dijitContentPane test" data-dojo-type="dijit/layout/ContentPane" id="myContent" widgetid="myContent">
    Hello
</div>

However, please note that when using a dijit/layout/ContentPane inside a dijit/layout/TabContainer a lot of additional CSS is added, possibily overriding your own CSS.

For example, for overriding the background color of a tab inside a dijit/layout/TabContainer, I had to use the following CSS selector:

.dijitTabContainerTop-dijitContentPane.test2 {
    background-color: #D4D4D1;
}

Demo: http://jsfiddle.net/Lcog9saj/

But also, be aware that the borders generated by the TabContainer are not applied to the ContentPane itself, but to an element with classname .dijitTabContainerTop-container (part of the TabContainer itself).

---

If this really doesn't work, then you can always access the domNode property of the widget you're trying to alter, for example:

require(["dijit/registry", "dojo/ready", "dojo/dom-class"], function(registry, ready, domClass) {
    ready(function() {
        domClass.add(registry
            .byId("myContentPane")
            .get("domNode"), "test2");
    });
});