javascriptdojodijit.formdijit.layout

How to remove black outline around TitlePane in Dojo

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

Solution

  • 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>