I am working on a Blazor project using MudBlazor components. I need to make some text boxes and a search button stick to the top of the MudGrid while scrolling. I tried using position: sticky and top: 0, which works in a Blazor snippet but not in my MudBlazor project.

Here is the relevant part of my code:

@page "/searchapp"
@inject IApplicationTableService ApplicationService
@using MudBlazor
@using BlazorAppDB.Shared.Models

<style>
    .custom-width {
        width: 100px;
    }

    .header {
        position: sticky;
        top: 0;
        background-color: white;
        padding: 10px;
        z-index: 1000;
    }

    .input-group {
        display: flex;
        align-items: center;
    }

    .input-group .mud-button {
        margin-left: 10px;
    }

    .mud-spacing {
        margin-bottom: 10px;
    }

    .small-textfield {
        width: 150px; /* Adjust the width as needed */
    }
</style>

<div style="margin-top: 20px;">
    <MudChip Style="width: 100%;" Color="Color.Primary" Variant="Variant.Text" Icon="@Icons.Material.Filled.FormatListBulleted" Size="Size.Small">
        <b>Search for an application in the App Inventory</b>
    </MudChip>
</div>

<div style="display: flex; align-items: center; justify-content: center;">
    <MudIcon Icon="@Icons.Material.TwoTone.DatasetLinked" Color="Color.Default" Size="Size.Large" />
    <MudText Typo="Typo.subtitle1">
        <b>SEARCH THE APPS DATABASE</b>
    </MudText>
</div>

<div class="header">
    <div class="input-group mud-spacing">
        <MudGrid>
            <MudItem xs="12" md="3" class="custom-width">
                <MudTextField @bind-Value="applicationName"
                              Label="Application Name"
                              AnchorOrigin="Origin.BottomCenter"
                              Variant="Variant.Outlined"
                              Clearable="true"
                              Margin="Margin.Dense"
                              AdornmentColor="Color.Dark"
                              Immediate="true" />
            </MudItem>

            <MudItem xs="12" md="3" class="custom-width">
                <MudTextField @bind-Value="applicationType"
                              Label="Application Type"
                              AnchorOrigin="Origin.BottomCenter"
                              Variant="Variant.Outlined"
                              Clearable="true"
                              Margin="Margin.Dense"
                              AdornmentColor="Color.Dark"
                              Immediate="true" />
            </MudItem>

            <MudItem xs="12" md="3" class="custom-width">
                <MudTextField @bind-Value="applicationOwner"
                              Label="Application Owner"
                              AnchorOrigin="Origin.BottomCenter"
                              Variant="Variant.Outlined"
                              Clearable="true"
                              Margin="Margin.Dense"
                              AdornmentColor="Color.Dark"
                              Immediate="true" />
            </MudItem>

            <MudItem xs="12" md="3">
                <MudButton Variant="Variant.Filled"
                           Color="Color.Primary"
                           OnClick="SearchApplications"
                           Class="custom-width">
                    Search
                </MudButton>
            </MudItem>
        </MudGrid>
    </div>
</div>

<MudDataGrid Items="@applications" Filterable="true" Hover="true" SortMode="SortMode.None" RowsPerPage="10" LoadingProgressColor="Color.Info" Groupable="false" FixedHeader="true" Height="600px" Expandable="true">
    <Columns>
        <PropertyColumn Property="x => x.AppId" Title="App ID" />
        <PropertyColumn Property="x => x.AppInfoId" Title="App Info ID" />
        <PropertyColumn Property="x => x.ApplicationName" Title="App Name" />
        <PropertyColumn Property="x => x.ApplicationOwner" Title="App Owner" />
        <TemplateColumn Title="App Description">
            <CellTemplate Context="cellContext">
                <MudTooltip Text="@cellContext.Item.DescriptionoftheApplication">
                    <MudTextField Value="@cellContext.Item.DescriptionoftheApplication" ReadOnly="true" Variant="Variant.Text" />
                </MudTooltip>
            </CellTemplate>
        </TemplateColumn>
        <PropertyColumn Property="x => x.BusinessFunction" Title="Business Function" />
        <TemplateColumn Title="App Type">
            <CellTemplate Context="cellContext">
                <MudTooltip Text="@cellContext.Item.ApplicationType">
                    <MudTextField Value="@cellContext.Item.ApplicationType" ReadOnly="true" Variant="Variant.Text" />
                </MudTooltip>
            </CellTemplate>
        </TemplateColumn>
        <PropertyColumn Property="x => x.IstheapplicationSsoenabled" Title="SSO Enabled" />
        <PropertyColumn Property="x => x.Snowcmdbid" Title="SNOW CMDB ID" />
        <TemplateColumn Title="Support DL">
            <CellTemplate Context="cellContext">
                <MudTooltip Text="@cellContext.Item.SupportDl">
                    <MudTextField Value="@cellContext.Item.SupportDl" ReadOnly="true" Variant="Variant.Text" />
                </MudTooltip>
            </CellTemplate>
        </TemplateColumn>
        <PropertyColumn Property="x => x.SnowqueueName" Title="SNOW Queue Name" />
        <PropertyColumn Property="x => x.Comment" Title="Comment" />
        <TemplateColumn Title="Owner Email">
            <CellTemplate Context="cellContext">
                <MudTooltip Text="@cellContext.Item.OwnerEmail">
                    <MudTextField Value="@cellContext.Item.OwnerEmail" ReadOnly="true" Variant="Variant.Text" />
                </MudTooltip>
            </CellTemplate>
        </TemplateColumn>
        <PropertyColumn Property="x => x.ContactEmail" Title="Contact Email" />
        <PropertyColumn Property="x => x.Platform" Title="Platform" />
    </Columns>
    <PagerContent>
        <MudDataGridPager />
    </PagerContent>
</MudDataGrid>

<MudText><b>If you didn't find the app you were looking for, try a new search.</b></MudText>
<MudText><b>If your app was not in the DB, please consider creating an entry for it using this link.</b> <a href="/createapp" style="color: blue;">Create App</a></MudText>

@code {
    private IEnumerable<ApplicationTable> applications = Enumerable.Empty<ApplicationTable>();

    private string applicationType;
    private string applicationName;
    private string applicationOwner;

    protected override async Task OnInitializedAsync()
    {
        try
        {
            applications = await ApplicationService.GetAllApplicationsAsync();
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error fetching applications: {ex.Message}");
            applications = Enumerable.Empty<ApplicationTable>();
        }
    }

    private async Task SearchApplications()
    {
        try
        {
            applications = await ApplicationService.SearchApplications(applicationType, applicationName, applicationOwner);

            if (!applications.Any())
            {
                Console.WriteLine("No applications found.");
            }
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error fetching applications: {ex.Message}");
            applications = Enumerable.Empty<ApplicationTable>();
        }
    }
}

I have tried using position: sticky and top: 0 on the .header class, but it doesn’t seem to work in my MudBlazor project. How can I fix this issue?