We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Custom styles are seemingly not applied at random times - ???


Both the numeric checkbox and the calendar seem to occasionally not apply styles and default to the basic style sheet. Is there something that can be done about this? Is it the way the custom styles are applied?  Currently, the custom style for the numeric checkbox is in a global style sheet, the styles for the calendar are locally in the component.

Attached please find an example- I opened a modal and the custom styles were not applied (the top image). I closed the modal, did nothing else, opened the modal again and the styles were applied (bottom image).

What can be done to ensure the custom styles are always applied?

Also: this has only happened on PCs or systems running Linux, not Macs.


Attachment: stylesNotAppliedThenApplied_dbe854ee.zip

5 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 19, 2019 01:35 PM UTC

Hi Elise, 
Thank you for contacting Syncfusion support. 
We were unable to reproduce the reported issue and suspect that may be local custom styles are not loaded in your application because of encapsulation property. So, we suggest you to add the “encapsulation: ViewEncapsulation.None” in the app.component.ts file as mentioned in the below code example. 
Code Example 
import { Component,ViewEncapsulation } from '@angular/core'; 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'], 
    encapsulation: ViewEncapsulation.None 
export class AppComponent {} 
Please find the sample from the below link. 
Could you please check the above sample and still issue persists, please revert us with complete code example of the component rendering and custom styles or Issue reproducing sample? 
Vinoth Kumar S 

ER Elise Rothberg September 19, 2019 11:22 PM UTC

Hi Vinoth,

Thanks for getting back to me so promptly.

Already using encapsulation: ViewEncapsulation.None.

I think this may be happening when using "cssClass='' " in the component- those styles are not always being applied.

I am waiting to hear back from some PC users and will let you know if this solved the problem.


VK Vinoth Kumar Sundara Moorthy Syncfusion Team September 20, 2019 09:43 AM UTC

Hi Elise, 
Thank you for the update. 
We would like to inform you that Calendar component does not have a cssClass property. So, we have prepared the sample based on Calendar with wrapper class and NumericTextbox with cssClass property and it was working properly. 
Please refer the below API link, 
Could you please check the above details and get back to us with complete code snippet or issue reproducible sample to validate further? 
Vinoth Kumar S 

ER Elise Rothberg September 20, 2019 03:41 PM UTC

Sorry- completely misspoke: I am using the scheduler, which does have a cssClass property.

When I have more information, I will update here.

KK Karthigeyan Krishnamurthi Syncfusion Team September 23, 2019 06:23 AM UTC

Thank you for the update. 
We will wait to hear from you and please update us with your Scheduler code example to serve you better. 

Live Chat Icon For mobile
Up arrow icon