DataGrid Header overlap

In my VS2019 I've got a DataGrid in the index page. The Blazor project is untouched. When I scroll down the DataGrid Header overlaps the MainLayout.razor header. I've tried doing something with CSS and style in both DataGrid and project code but with no luck. Any idea what to do?

overlaped div in MainLayout.razor:

<div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>

Check your header z-index using the browser element inspector. Should be greater than DataGrid columns headers z-index if you do not want to stay behind them.

Yes, that's the problem. Thanks again.

How did you solve the overlap problem?

Add style="z-index:2;"

1 Like