dojo claro.css and apply custom styles to it

2420
7
Jump to solution
09-07-2016 07:48 AM
Alexwang
Frequent Contributor

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?

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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.

View solution in original post

7 Replies
RobertScheitlin__GISP
MVP Emeritus

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?

0 Kudos
Alexwang
Frequent Contributor

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. 

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Alex,

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

0 Kudos
Alexwang
Frequent Contributor

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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?

0 Kudos
Alexwang
Frequent Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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.