1. Home
  2. Forum
  3. Blazor
  4. Grid not formatting right

Grid not formatting right

My grid won't format properly.  See below a snapshot of what it looks like, plus also the _Hosts.html head section.


Thanks,


<head>

    <meta charset="utf-8" />

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

    <title>Job Costing</title>

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

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

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

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


@* <link rel='nofollow' href="_content/DevExpress.Blazor/dx-blazor.css" rel="stylesheet" />*@

    <link rel='nofollow' href="_content/DevExpress.Blazor/dx-blazor.bs5.css" rel="stylesheet" />

    <link rel='nofollow' href="_content/DevExpress.Blazor.RichEdit/dx-blazor-richedit.bs5.css" rel="stylesheet" />


    <script src="_content/MatBlazor/dist/matBlazor.js"></script>

    <link rel='nofollow' href="_content/MatBlazor/dist/matBlazor.css" rel="stylesheet" />

    <link rel='nofollow' href="css/syncfusion-blazor-icons.css" rel="stylesheet" />

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


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


    <script>

        function highlightFilteredCells(gridCssClass, filteredCellCssClass, filterValue) {

            setTimeout(function () {

                var grid = document.querySelector("." + gridCssClass);

                var cells = grid.querySelectorAll("." + filteredCellCssClass);

                for (var i = 0; i < cells.length; i++) {

                    var cell = cells[i];

                    cell.innerHTML = cell.innerHTML.replace(filterValue, "<span class='bg-warning'>" + filterValue + "</span>");

                }

            }, 250);

        }

    </script>


    <script src="_content/BlazorInputFile/inputfile.js"></script>

</head>



1 Reply
RS Renjith Singh Rajendran Syncfusion Team February 17, 2022 09:21 AM UTC

Hi Miles, 
 
Greetings from Syncfusion support. 
 
We suggest you to ensure to add proper styles in your application based on the Nuget packages you have installed in your application to overcome this scenario. Please refer the below documentation and add styles based on the Nuget package you have installed. 
 
If you are using individual Nuget packages (Syncfusion.Blazor.Grid) then use the below css file, 
 
 
<link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" /> 
 
 
If you are using Syncfusion.Blazor then please use the below css file, 
 
<link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />
 
 
Kindly ensure this case from your side and if you are still facing difficulties then kindly get back to us with a issue reproducing sample for us to validate and further proceed on this based on your scenario. 
 
Regards, 
Renjith R 
 


Loader.
Up arrow icon