topic Multiple CSS Content Pane Styles in Web AppBuilder Custom Widgets Questions

Multiple CSS Content Pane Styles

BrandonPrice — Fri, 12 Jan 2018 19:13:07 GMT

I overrode my content pane class already. But now I want use another content pane with the default styling. Is this possible?

https://community.esri.com/groups/web-appbuilder-custom-themes?sr=search&searchId=656cd270-a749-4463-a5a8-3745d50a3a8d&searchIndex=6‌

https://community.esri.com/community/developers/web-developers/arcgis-api-for-javascript?sr=search&searchId=3416ee6b-aa59-4251-8317-ce962d74be65&searchIndex=1‌

Re: Multiple CSS Content Pane Styles

RobertScheitlin__GISP — Fri, 12 Jan 2018 19:22:09 GMT

Brandon,

Sure that is call css specificity You need a css rule that only applies to one particular content pane. You can add a class name or a id to your rule then that rule is specific to that particular element.

Re: Multiple CSS Content Pane Styles

BrandonPrice — Fri, 12 Jan 2018 20:02:50 GMT

Thanks Robert.

I created a class in my html within the title panes I wanted changed:

and then adjusted my css in those areas to point to the that class:

.download .dijitTitlePaneTitle {
padding: 0 0 3px 5px;
background-color: white;
border-radius: 2px;
border: 1px solid black;
width: 30px;
height: 30px;
}

.download .dijitTitlePaneContentInner {
border: 1px solid black;
margin-top: 7px;
}

However, I have also changed the .dijitArrowNode's background image. I do not want to have an image display at all for the for one of my content panes and keep the custom image on the others. How do I that? Any suggestions?

Thanks,
Brandon

Re: Multiple CSS Content Pane Styles

RobertScheitlin__GISP — Fri, 12 Jan 2018 20:13:12 GMT

Do the same thing there make the css rule more specific.

Re: Multiple CSS Content Pane Styles

BrandonPrice — Fri, 12 Jan 2018 20:33:58 GMT

None of these work:

.download .dijitTitlePane .dijitClosed .dijitArrowNode {
background-position: 3px 0;
background-image: url("image/download.png");
height: 11px;
// change with your image dimensions width: 11.5px;
// change with your image dimensions
}

.download .dijitTitlePane .dijitOpen .dijitArrowNode {
background-position: 3px 0;
}

.download .dijitTitlePane .dijitArrowNode {
background-image: url("image/download.png") !important;
background-repeat: no-repeat;
height: 11px !important;
// change with your image dimensions width: 11.5px;
// change with your image dimensions
}

.download .dijitTitlePane .dijitArrowNode, .claro .dijitFieldset .dijitArrowNode {
width: 12.5px !important;
}

It goes back to the regular arrownode when I replace claro with my class.

These work:

.download .dijitTitlePaneTitle {
padding: 0 0 3px 5px;
background-color: white;
border-radius: 2px;
border: 1px solid black;
width: 30px;
height: 30px;
}

.download .dijitTitlePaneContentInner {
border: 1px solid black;
margin-top: 7px;
}

Re: Multiple CSS Content Pane Styles

RobertScheitlin__GISP — Fri, 12 Jan 2018 20:44:48 GMT

Don't replace .claro just add you class to the rule.

Re: Multiple CSS Content Pane Styles

BrandonPrice — Fri, 12 Jan 2018 21:44:59 GMT

Thanks Robert for your help so far. I still couldn't get that method to work. Maybe you know of an easier way via the html to remove the arrow node only on that particular title pane?

Re: Multiple CSS Content Pane Styles

RobertScheitlin__GISP — Fri, 12 Jan 2018 21:50:58 GMT

Brandon,

What is the rule you are attempting to use to hide the arrow now?

Re: Multiple CSS Content Pane Styles

BrandonPrice — Fri, 12 Jan 2018 21:58:22 GMT

I was planning on getting the custom arrow node to show with my new class on two of my custom panes and then I would set the default claro arrow node display to none on my other content pane.

Re: Multiple CSS Content Pane Styles

RobertScheitlin__GISP — Fri, 12 Jan 2018 22:11:45 GMT

OK, But what rule have you tried that is not working?

Re: Multiple CSS Content Pane Styles

RobertScheitlin__GISP — Sun, 12 Dec 2021 10:55:27 GMT

A rule as simple as this should work:

.download.dijitArrowNode {
  display: none;
}‍‍‍

or even a little more specific:

.download.dijitTitlePane .dijitArrowNode {
  display: none;
}‍‍‍‍‍‍

Re: Multiple CSS Content Pane Styles

BrandonPrice — Fri, 12 Jan 2018 23:11:40 GMT

Hi Robert,

Not sure what was going on with me on my end. Sorry for the confusion. Thanks.