Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
alamuru vivitha
30
ignite ui highlight directive custom color not changing
posted

We used igniteui highlight directive for find the text from the list.The matched text by default showing yellow and active text showing in orange color.We need to change the color of the matched and active text to our custom colors.

we used [cssClass]="myClass" and [activeCssClass]="activeHighlightClass" but those are not working

We wrote our code like the following.

<span class="display" igxTextHighlight [groupName]="'group1'" [row]='i' [cssClass]="activeHighlightClass" [activeCssClass]="activeHighlightClass" (click)="getRouterCatalogEventDetails(i,entity)"
[value]="entity.entity">{{entity.entity}}

Please help us to change the highlight text color and active text color.

Thanks

  • 2180
    Offline posted

    Hello,

    The reason for this issue is that we are using inline styles for those colors. I have submitted the issue in our github repository github.com/.../5403.

    Until the issue is resolved, you could use "!important" in your CSS styles in order to override them. I have attached a sample application, that demonstrates how to restyle the highlight and active highlight colors.

    Sincerely,
    Diyan Dimitrov
    Senior Software Developer

    highlight-styling.zip