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?
Solved! Go to Solution.
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.
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?
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.
Alex,
Is your Widget.html using a dijit/layout/TabContainer or a jimu/dijit/TabContainer (there's a significant difference)?
Robert, it's dijit/layout/TabContainer. what is the difference between them? I guess jimu/dijit/TabContainer is a overwritten version?
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?
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?
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.