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

[Elise Rothberg]

Hello,

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.

Thanks,

Elise 

Attachment: stylesNotAppliedThenApplied_dbe854ee.zip

[Vinoth Kumar Sundara Moorthy]

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

 

@Component({ 

    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. 

 

https://www.syncfusion.com/downloads/support/forum/147653/ze/syncfusion-angular-app_modal_1476531377144325 

 

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? 

 

Regards, 

Vinoth Kumar S 

[Elise Rothberg]

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.

thanks,

E

[Vinoth Kumar Sundara Moorthy]

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. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/147653/ze/syncfusion-angular-app_147653_cssclass-1511046690 

 

Please refer the below API link, 

https://ej2.syncfusion.com/angular/documentation/api/calendar 

 

Could you please check the above details and get back to us with complete code snippet or issue reproducible sample to validate further? 

 

Regards, 

Vinoth Kumar S 

[Elise Rothberg]

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

When I have more information, I will update here.

[Karthigeyan Krishnamurthi]

Hi Elise,  

  

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. 

 

Regards, 

Karthi