javascriptcsstabsdojodijit.layout

how do you remove selection highlighting css on dojo dijit layout tabs

I would like to get rid of the css effects on the dijit layout tabs when they are selected.

There is an unprofessional looking dotted box when I click on a tab as you can see in the Items tab. Also the tab gets larger and has a blue line above it. How do I get rid of these effects .

Here's an example:

enter image description here

Solution

  • This is so simple you have to remove the outline from the generated tab div's .

    so in the new version of dojo the tab's has the .tabLabel but the earlier doesn't have this last so you can access it by attribute as 

    .dijitTabContainer div[role="tab"]

    just apply the below css (work on both , earlier and newest version )

    .dijitTabContainer .tabLabel ,.dijitTabContainer div[role="tab"] {
  outline:none;
}

    (not that dojo provides multiple themes that you can use ,) See below woriknig snippet 

    require([
    "dojo/ready",
    "dojo/on",
    "dijit/registry",
    "dijit/form/Button",
    "dijit/layout/TabContainer",
    "dijit/layout/ContentPane",
    "dojox/layout/ContentPane"
], function(ready, on, registry,Button, TabContainer, ContentPane, ContentPaneX){
    ready(function(){
        var btn = registry.byId("btn");
        var tc = registry.byId("mainTabs");
        var idx = 0;
        on(btn, 'click', function(){
            var newItemPane = ContentPaneX({
                title:'Item ' + idx,
                closable: true,
                id:'item_tab_' + idx,
                iconClass: 'dijitIconUsers'
            });
            idx++;
            
            tc.addChild(newItemPane);
            tc.selectChild(newItemPane);
        });
    });
});
    #mainTabs{
    height: 400px;
    width:500px;    
}

.dijitTabContainer .tabLabel ,.dijitTabContainer div[role="tab"]{
  outline:none;
}
    <script type="text/javascript">
  dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>

<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>

<div class="claro">
<div id="mainTabs" data-dojo-type="dijit/layout/TabContainer">
    <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title: 'Main'">
        <div id="btn" data-dojo-type="dijit.form.Button" data-dojo-props="label: 'Add'"></div>
    </div>        
</div>    
</div>