topic Re: dojo claro.css and apply custom styles to it in ArcGIS Web AppBuilder Questions

dojo claro.css and apply custom styles to it

Alexwang — Wed, 07 Sep 2016 14:48:30 GMT

Hello, my UI has a dijit TabContainer control and I want to apply some custom styles on it. Based on the solution here, I need to locate the Claro.css. Where can I find the Claro.css stylesheet within WAB? is it doable to change the default TabContainer styles using WAB dev?

Re: dojo claro.css and apply custom styles to it

RobertScheitlin__GISP — Wed, 07 Sep 2016 18:26:41 GMT

Alex,

The linked page you provided does all the changes in JS code. There is no css work to be done so I am not sure why you are looking for the Claro.css?

Re: dojo claro.css and apply custom styles to it

Alexwang — Wed, 07 Sep 2016 18:56:29 GMT

Thanks, Robert. not sure what was wrong? I used the exact same codes in my WAB widget and couldn't get teh custom styles. console.log(query(".dijitTabInner.dijitTabContent.dijitTab")) return an empty array.

Re: dojo claro.css and apply custom styles to it

RobertScheitlin__GISP — Wed, 07 Sep 2016 19:07:48 GMT

Alex,

Is your Widget.html using a dijit/layout/TabContainer or a jimu/dijit/TabContainer (there's a significant difference)?

Re: dojo claro.css and apply custom styles to it

Alexwang — Wed, 07 Sep 2016 19:11:05 GMT

Robert, it's dijit/layout/TabContainer. what is the difference between them? I guess jimu/dijit/TabContainer is a overwritten version?

Re: dojo claro.css and apply custom styles to it

RobertScheitlin__GISP — Wed, 07 Sep 2016 19:18:24 GMT

Alex,

The jimu/TabContainer is a very simple (lightweight) tab container. I am not sure what issue you are running into then. Can you share your code for inspection?

Re: dojo claro.css and apply custom styles to it

Alexwang — Wed, 07 Sep 2016 19:38:05 GMT

Robert, I am using dijit/layout/TabContainer and had issues with it within WAB. Let's me try jimu/dijit/TabContainer. Do you know where I can get some sample codes to use jimu/dijit/TabContainer?

Re: dojo claro.css and apply custom styles to it

RobertScheitlin__GISP — Wed, 07 Sep 2016 19:45:37 GMT

Alex,

All of the otb widget that wab uses use jimu/dijit/TabContainer, so there are plenty of example you have at your disposal already. Jimu/dijit/Tabcontainer also already spans the whole width of the container as well so there is no need for the code you are trying to add.