Multiple CSS Content Pane Styles

372
11
Jump to solution
01-12-2018 11:13 AM
BrandonPrice
Occasional Contributor
0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

A rule as simple as this should work:

.download.dijitArrowNode {
  display: none;
}

or even a little more specific:

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

View solution in original post

0 Kudos
11 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

BrandonPrice
Occasional Contributor

Thanks Robert.

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

<div data-dojo-type="dijit/TitlePane" data-dojo-props='open:false' class="download">

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
BrandonPrice
Occasional Contributor

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;
}

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos
BrandonPrice
Occasional Contributor

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?

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Brandon,

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

0 Kudos
BrandonPrice
Occasional Contributor

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.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos