Code changing collapse/Expand

[Bassam]

I have a problem with  Code changing collapse/Expand in the radGantt.

The following code has been used and works great For the first part.

   <style type="text/css">       
          .radIcon.radIconCollapse:before {
            content: "\e121";
           }
           </style>

The problem in the second part was the use of the following code and was not changed

First the following code was used and did not work.

<style type="text/css">       
          .radIcon.radIconExpand:before {
            content: "\e11e";
           }
           </style>

Secondly, the following code was used and did not work.

 <style type="text/css">       
          .k-rtl .radIconExpand:before {
            content: "\e11e";
           }
           </style>

 

[Doncho]

Hi Bassam,

The custom CSS you are applying seems correct and properly addressing the Expand/Collapse icons.

A probable cause for the style not to be applying could be the specificity of the CSS selector. You can try to change the icon using the !important statement:

.radIcon.radIconExpand:before {
    content: "\e11e" !important;
}
.radIcon.radIconCollapse:before {
    content: "\e121" !important;
}

If this approach has the desired result you may remove the '!important' and increase the specificity of the selectors, to avoid the usage of !important, see CSS !important: Don’t Use It. Do This Instead

Sample selectors:

.RadGantt .rgtTreelistWrapper .rgtTreelistContent .radIcon.radIconExpand:before {
    content: "\e11e";
}
.RadGantt .rgtTreelistWrapper .rgtTreelistContent .radIcon.radIconCollapse:before {
    content: "\e121";
}

In case the desired icon is not changing even when using '!Important' I would suggest you use the Browser's Dev Tools to inspect the Html structure and define an appropriate selector to reach the desired element and override its default style.

 

The first two points in the Improve Your Debugging Skills with Chrome DevTools may give you some useful tips on how to inspect the Html structure and the styles applied.

More about CSS specificity you can find in the following articles:

• Specifics on CSS Specificity;
• CSS Specificity: Things You Should Know;
• Specificity - CSS | MSDN;

I hope this will prove helpful!

Kind regards,
Doncho
Progress Telerik