topic use claro css for tabbed panel? in Web AppBuilder Custom Widgets Questions

use claro css for tabbed panel?

LefterisKoumis — Mon, 27 Feb 2017 21:47:45 GMT

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.

Re: use claro css for tabbed panel?

RobertScheitlin__GISP — Tue, 28 Feb 2017 00:36:44 GMT

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

Re: use claro css for tabbed panel?

LefterisKoumis — Tue, 28 Feb 2017 21:41:47 GMT

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

----- ------

Re: use claro css for tabbed panel?

RobertScheitlin__GISP — Tue, 28 Feb 2017 21:45:22 GMT

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

Re: use claro css for tabbed panel?

LefterisKoumis — Tue, 28 Feb 2017 22:16:23 GMT

It does indeed using the dijit.layout.tabcontainer

Re: use claro css for tabbed panel?

RobertScheitlin__GISP — Wed, 01 Mar 2017 03:24:24 GMT

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?

Re: use claro css for tabbed panel?

LefterisKoumis — Wed, 01 Mar 2017 17:52:45 GMT

It seems to be claro

Re: use claro css for tabbed panel?

RobertScheitlin__GISP — Wed, 01 Mar 2017 18:41:47 GMT

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.

Re: use claro css for tabbed panel?

LefterisKoumis — Wed, 01 Mar 2017 18:52:21 GMT

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

Re: use claro css for tabbed panel?

RobertScheitlin__GISP — Wed, 01 Mar 2017 19:20:00 GMT

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.

Re: use claro css for tabbed panel?

LefterisKoumis — Wed, 01 Mar 2017 22:40:16 GMT

Thanks. I changed the settings in the dijitTab of the override file to get the display I want.