1. Home
  2. Forum
  3. Blazor
  4. css not loading

css not loading

Hi guys

I can't solve this problem. spent a couple of hours researching the forum no luck so far.
I have a blazor server app. I follow the tutorial and put this <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/fabric.css" rel="stylesheet" />
in the _Host.cshtml.

but the css is not loaded. I checked the source file in chrome developer tool. the fabric.css is empty.

I tried to create a new app locally it's working as expected.so there's nothing wrong on the grid.
I tried to clear browser cache as per some https://www.syncfusion.com/forums/159856/syncfusion-css-doesnt-load-on-new-blazor-wasm-application but no luck.
I guess there might be something collision in the css side. but i'm not sure. I cannot upload my project. I have attached _Host.cshtml and please have a look.







Attachment: _Host_6101c6df.7z

4 Replies 1 reply marked as answer
LA Larry May 12, 2021 09:24 AM UTC

looking in more details.
when i see the developement tools and the following errors reported

GET http://localhost:5000/_content/Syncfusion.Blazor.Themes/fabric.css net::ERR_ABORTED 404 (Not Found)



RS Renjith Singh Rajendran Syncfusion Team May 14, 2021 03:04 AM UTC

Hi Larry, 

Greetings from Syncfusion support. 

We suspect that you have installed Syncfusion.Blazor nuget in your application. At these cases, we suggest you to ensure to refer the below css style in your application. 

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


This style(_content/Syncfusion.Blazor.Themes/fabric.css) is for individual nuget packages(Syncfusion.Blazor.Grid).  


Please get back to us if you need further assistance. 

Regards, 
Renjith R 


Marked as answer
TA Talha Ahmed October 31, 2024 05:05 PM UTC

I'm facing the same issue i just upgrade Syncfusion.Blazor.Grid and Card to Latest Version from 19.1.0.57. Even that it shows dropdowns as a textbox


PS Prathap Senthil Syncfusion Team November 4, 2024 05:14 AM UTC

Based on the reported problem, we suspect that the theme references are not correctly defined in your project, which is why you are facing this issue. To resolve this, please try the following suggestions to ensure that the necessary theme and script are included in your App.razor file.


  1. CDN
 
Scripts- https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference
Styles - https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference

 
  1. Static Web Assets

Scripts - https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets

 

Styles - https://www.nuget.org/packages/Syncfusion.Blazor.Themes/


If you are using Syncfusion.Blazor single NuGet. If this is the case, we recommend referring to the attached code snippet and our documentation for further assistance.

Note:If you are  Syncfusion.Blazor single NuGet you don’t need to install the Syncfusion.Blazor.Themes  Nuegt.

App.Razor
<!DOCTYPE html>

<html lang="en">

 

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="/" />

    <link rel="stylesheet" rel='nofollow' href="bootstrap/bootstrap.min.css" />

    <link rel="stylesheet" rel='nofollow' href="app.css" />

    <link rel="stylesheet" rel='nofollow' href="BlazorApp3.styles.css" />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png" />

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

    <HeadOutlet />

</head>

 

<body>

    <Routes />



    <script src="_framework/blazor.web.js"></script>



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



    <!--Use below theme reference if you are using Syncfusion.Blazor Single NuGet-->


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

   

    

    <!--<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>-->

 

    <!--Use below script reference if you are using Syncfusion.Blazor Single NuGet-->

    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

 

 

</body>

 

</html>

 


Documentation: Getting Started with Blazor DataGrid Component | Syncfusion



Loader.
Up arrow icon