0

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?

Keksdose
  • 17
  • 6
  • Have you checked http://stackoverflow.com/questions/10636360/dojo-dijit-layout-tabcontainer-how-to-add-class-to-tab ? – connexo May 21 '15 at 07:21
  • it's works for Dojo 1.7 I got 1.10 here so "pane2button" which is used there doesn't exist anymore. – Keksdose May 21 '15 at 09:12

2 Answers2

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");
    });
});
g00glen00b
  • 41,995
  • 13
  • 95
  • 133
  • 1
    Sorry, my fault. I wasn't specific enough. Your example adds a class to the "Content". I want to add a class to the Tab itself which the TabContainer generates out of the ContentPane. Or if you look at my example I mean that thing where the text "FunnyTitle" will appear. – Keksdose May 21 '15 at 09:29
0

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"

Keksdose
  • 17
  • 6
  • 1
    I see that you're mixing both old and new Dojo API code. `domClass` is indeed Dojo 1.7+, but `dijit.byId()` should be replaced by loading the module `dijit/registry` and using `registry.byId()`. – g00glen00b May 21 '15 at 12:03
  • yeah that's right. Thanks for your hint. Btw. my answer wasn't totaly correct. It causes errors if the ContentPane is inside a Dialog. So if this happens, you need to get the ContentPane an ID, too. Dojo will create another ID for the tabcontainer without a changeing number after the Dialog was closed. – Keksdose May 29 '15 at 14:37