1. Home
  2. Forum
  3. Blazor
  4. Text appearng below header

Text appearng below header

When I add a Syncfusion grid to my razor page in blazor I am getting text between the column headers and the first row.  See below.  Any help would be appreciated. rlm


SyncFusion Grid Error.jpg




2 Replies
RM Richard Morrell November 23, 2024 02:24 PM UTC

Solved by adding this to my index page html:



<link

rel='nofollow' href = "_content/Syncfusion.Blazor/styles/bootstrap4.css"

rel = "stylesheet"/>


PS Prathap Senthil Syncfusion Team November 25, 2024 12:11 PM UTC

Hi Richard Morrell,

Based on the reported problem, the theme references are not correctly defined in your project, which is why you are facing this issue. But we are happy to hear that the reported issue has been resolved on your end,

For more information about the necessary themes and scripts included in your App. razor file, please refer to the documentation


  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



Regards,
Prathap Senthil


Loader.
Up arrow icon