use claro css for tabbed panel?

560
10
Jump to solution
02-27-2017 01:47 PM
LefterisKoumis
Regular Contributor

I use the tabcontainer to create tabbed panel, however the visual needs improvement. Are any other options for css in the Web appbuilber or do we need to import other stylesheets. Thank you.

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

Lefteris,

   It is called css precedence. If you have a css rule in a stylesheet then the order that the stylesheets are applied means that the css rules will have priority over others. Css specificity also has a large role too. You can override css riles using !important or just specifying a more specific rule.

View solution in original post

0 Kudos
10 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Lefteris,

   The styling you are seeing is because you are using the jimu TabContainer dijit. If you are not happy with that look then you can manually edit the css or not use the jimu/TabContainer and instead change your code to use the dijit/layout/TabContainer

0 Kudos
LefterisKoumis
Regular Contributor

Thank you Robert. Actually, I am using the  dijit/layout/TabContainer.

<div data-dojo-type="dijit/layout/TabContainer" style="width: 600px; height: 700px;" tabStrip="true">
<div data-dojo-type="dijit/layout/ContentPane" title="General Environmental" data-dojo-props="selected:true">

----- ------

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Strange. Can you right click a tab in your browser and choose inspect element to see what css rules / stylesheets are being applied?

0 Kudos
LefterisKoumis
Regular Contributor

It does indeed using the dijit.layout.tabcontainer

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Lefteris,

  So as you look higher in the parent elements and get to the TabContainer if you look to the right side of the developer tools screen it tells you the inheritance of the css rules:

What dojo theme is listed?

0 Kudos
LefterisKoumis
Regular Contributor

It seems to be claro

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Lefteris,

   OK but do you see that the dojo-override.css is being used as well. That is likely where the appearance is being altered.

0 Kudos
LefterisKoumis
Regular Contributor

Yes, but why the dojo-override.css is called? How do I prevent it?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Lefteris,

   It is called css precedence. If you have a css rule in a stylesheet then the order that the stylesheets are applied means that the css rules will have priority over others. Css specificity also has a large role too. You can override css riles using !important or just specifying a more specific rule.

0 Kudos