Syncfusion CSS doesn't load on new Blazor Wasm application

[Danail]

Hello everyone,

I'm trying out Syncfusion on Blazor for the first time but unfortunately I cannot set up my project.

Here's what I do:

1. Create Blazor WASM .Net 5.0 project
2. Add Syncfusion.Blazor NuGet package
3. In Program.cs on the Client project - Add builder.Services.AddSyncfusionBlazor();and register my license key
4. Add necessary namespaces to_Imports.razor
5. In wwwroot/index.html -Add to the element  the following line  

1. Create new page with the following code:

1. Run the app and navigate to /calendar-syncfunction

2. Get this as a result:

See that the .css file is not present in the _content folder:

Any help would be appreciated

[Berly Christopher]

Hi Danail, 

  

Greetings from Syncfusion support. 

  

We have checked the reported issue by creating the WASM application in .NET 5.0 project. Unfortunately, the reported issue is not occurred at our end and the Calendar component is rendered correctly. We suggest you to make ensure that CSS file is correctly referred in the project. 

  

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 

 

  

Screenshot: 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WASM_RC5_159856-1242272569  

  

Regards, 

Berly B.C 

[Stefan]

I have the exact same problem with the DataGrid.

On the first page load the "_content/Syncfusion.Blazor.Themes" files are not loaded (can be seen in the Developer Tools of the browser).

When refreshing the page, the Themes are loaded and everything works as expected.

Probably this only happens when using the "hosted" wasm project template, where the client app is loaded via the server app.

I attached a small sample solution to reproduce the issue under the Counter page.

Attachment: SyncfusionTheme_a11d8222.zip

[Berly Christopher]

Hi Stefan,   

  

Thanks for sharing the sample.   

  

Query: “On the first page load the "_content/Syncfusion.Blazor.Themes" files are not loaded (can be seen in the Developer Tools of the browser).”  

  

We have validated the reported query at our end by opening the provided sample at our end. We are not able to reproduce the reported issue at our end. For your convenience, we have prepared a video demonstration while running the project from visual studio   

  

Video: https://www.syncfusion.com/downloads/support/forum/159856/ze/SyncfsuionCSS443895923   

  

We suggest you to ensure the reported issue by clearing the browser cache and Nuget cache. Please get back to us with more details, if you are still facing the reported issue.   

  

Regards,   

Berly B.C 

[Danail]

Stefan, 

When I was having the issue it was the exact same situation as yours. The CSS files would not load until the first page reload. Unfortunately I wasn't able to fix the issue in my current project. 

However, creating a brand new "hosted" WASM project fixed the issue. 

[Stefan]

Thanks for the video and the reply, clearing the browser cache did fix the problem! 👍

thx!

[Berly Christopher]

Hi Stefan, 

  

We are glad to know that your issue is resolved. Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C 

[Vaidas Mikalajunas]

But it did not help for me (clearing browser and nuget cache) - the same ugly Calendar look... Also, I did not understand your video - you showed that css is loaded and working, then you clear cache and again showed, that css is working the same way as before clearing cache - so what is the point of this video? :). Worked only with  material.css

[Berly Christopher]

Hi Vaidas, 

  

We have checked the WASM project with other available themes by using the local files from the _content folder and online CDN link. In both ways Calendar control is rendered correctly. Please find the other available theme’s path in the index.html. 

  

So, we suggest you to ensure the style URL is correctly referred in your application as mentioned any one of the below ways. 

  

Local Files: 

  

Material theme: 

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" /> 

 

Bootstrap themes: 

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap.css" rel="stylesheet" /> 

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" /> 

Fabric theme: 

<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" /> 

Highcontrast theme: 

  <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/highcontrast.css" rel="stylesheet" /> 

  

CDN Link: 

  

Material theme: 

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.4.33/styles/material.css" rel="stylesheet" /> 

Bootstrap themes: 

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.4.33/styles/bootstrap4.css" rel="stylesheet" /> 

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.4.33/styles/bootstrap.css" rel="stylesheet" /> 

Highcontrast theme: 

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.4.33/styles/highcontrast.css" rel="stylesheet" /> 

Fabric theme: 

<link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.4.33/styles/fabric.css" rel="stylesheet" /> 

 

  

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WASM_RC5_159856_Modified-1690498672  

  

Regards, 

Berly B.C 

[TARIK]

Hello,

This issue happend with me, and i know why, so this could be helpfull for the others.

The css file is not loaded at the first time, simply because you have another bootstrap <link> with the same rel ("stylesheet").

So it's using another css file, instead of the syncfusion's. Just remove th

much love,

[Berly Christopher]

Hi Danail, 

  

Thanks for the update. 

  

Regards, 

Berly B.C 

[Brent Minder]

@Berly Christopher

Those links didn't work with redundant "rel" attributes. I removed the first one ('nofollow') and left the 'stylesheet' one, only then did they work for me.

Thanks.

[Berly Christopher]

Hi Brent, 

  

Thanks for the information. Please let us know if you need further assistance on this. 

  

Regards,  

Berly B.C