can't change border-bottom-color of selected table cell from red to my app color

[Oliver Gattermayr]

Hello,

I've tried adding customizing the underline color of the selected table cell in a few ways, without any success.

I also tried customizing the colors directly in the material.css file where i see all the grid styles, also with the same results.

Under inspect element, i got these classes - but was unable to customize them. Yes, the scss variables are correct and file is imported.

td.e-rowcell .e-inputbox .e-selectionbackground .e-active .e-updatedtd {

border-bottom: 1px solid $bg-secondary;

}

Here is a screenshot:

https://www.dropbox.com/s/hilro74q8b6i4r5/Syncfusion.png?dl=0

Thanks in advance

Oli

[Balaji Sekar]

Hi Oliver, 

 

Greetings from the Syncfusion support. 

 

We have validated your query with provided the information and we suggest you to use CSS property value without variable reference in CSS. Please refer the below code example and sample for more information. 

[index.html] 

<style> 

  td.e-rowcell.e-inputbox.e-updatedtd.e-selectionbackground.e-active { 

    border-bottom: 1px solid #e3165b; 

  } 

</style> 

 

 

Sample link: https://stackblitz.com/edit/angular-zgraaz-8cje6e 

Please get back to us if you need further assistance. 

Regards, 

Balaji Sekar 

[Oliver Gattermayr]

Hello,

I just tried as you said, and i have the partial result.

What i want is that all underlines to be my brand color.

What i got instead, with this solution is that the underlined cell is still the regular Syncfusion red, but when i move to another cell, the previous altered has the brand color.

How do i get rid of the red completely?

Video

Thanks in advance

Oli

[Mohammed Farook J]

Hi Oliver, 

 

We have validated the given video and please apply the following code example to override the focus background color in the input box. 

 

 

 

    .e-input-group:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::before, .e-input-group.e-control-wrapper:not(.e-float-icon-left):not(.e-float-input)::after, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::before, .e-input-group.e-control-wrapper.e-float-icon-left:not(.e-float-input) .e-input-in-wrap::after{ 

      background-color: #e3165b; 

    } 

 

 

Please find the sample for your reference. 

 

Sample : https://stackblitz.com/edit/angular-zgraaz-7rfh9k?file=index.html 

 

 

Regards, 

J Mohammed Farook