How to remove black outline around TitlePane in Dojo

69 Views Asked by At

I have to learn dojo for some project . Can some one let me know how to remove black outline around TitlePane in Dojo .

enter image description here

<script>
 require(["dojo/ready", "dijit/TitlePane", "dojo/dom"], function(ready, TitlePane, dom){
    ready(function(){
        var tp;
        tp = new dijit.TitlePane({title:"I'm a TitlePane", content: "Collapse me!"});
        dom.byId("holder").appendChild(tp.domNode);
    });
});
</script>

I did check out the sample application at the below URL and found the same issue there too

Dojo tookit doc

enter image description here

I am using dojo v1.10

1

There are 1 best solutions below

0
Bourbia Brahim On BEST ANSWER

this style is generated by user agent browser (chrome) ,

if you want to remove it ,

just override the .dijitTitlePaneTitleFocus and set its outline to none as below :

.dijitTitlePaneTitleFocus {
    outline: none !important;
}

if you want to apply to all other widget you can apply this style :

.dijitFocused div  {
    outline: none !important;
}

See working snippet :

require(["dojo/ready", "dijit/TitlePane", "dojo/dom"], function(ready, TitlePane, dom){
    ready(function(){
        var tp;
        tp = new dijit.TitlePane({title:"I'm a TitlePane", content: "Collapse me!"});
        dom.byId("holder").appendChild(tp.domNode);
    });
});
.dijitFocused div{
    outline: none !important;
}
<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" />

<body class="claro">
  <div  id="holder"></div>
</body>