DataGrid scroll bars work but NOT visible

Radzen Studio Blazor WebAssembly
1

All the configurations, look correct. Definition below. Wondering what prevents the scroll bars from being visible, yet functional. I tried using 'style' with height/width with no effect as fyi. Any help would be appreciated.

    <RadzenDataGrid  @ref="grid" IsLoading=@isLoading Count="@count" Data="@terms" LoadData="@LoadDataGrid" AllowSorting="true" AllowColumnResize="true"  AllowFiltering="true" AllowPaging="true" PageSize="15" TItem="ProviderTermRawDataVM"  FilterMode="FilterMode.Advanced"  ShowPagingSummary="true" LogicalFilterOperator="LogicalFilterOperator.Or">
        <Columns>
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="ID" Filterable="false" Title="ID" Frozen="true" Width="100px" TextAlign="TextAlign.Center" />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="ProcessedStatus" Title="Process Status" Width="240px" />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="TaxID" Title="Tax ID" Width="170px"/>
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="NPI" Title="NPI" Width="170px"/>
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="FirstName" Title="First Name" Width="170px"/>
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="LastName" Title="Last Name" Width="170px"/>
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="IsError" Title="Error" Width="100px"  />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="FacilityName" Title="Facility" Width="200px" />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="Address1" Title="Address 1"  Width="450px" />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="Address2" Title="Address 2"  Width="240px" />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="City" Title="City" Width="200px" />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="State" Title="State" Width="100px" />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="Zip" Title="Postal Code" Width="140px" />
            <RadzenDataGridColumn TItem="ProviderTermRawDataVM" Property="TermDateRaw" Title="TermDate" Width="140px" />
        </Columns>
    </RadzenDataGrid>
2

Most probably the DataGrid is in overflow:hidden container - use your browser tools to check it.

3

Interesting. If I change the below css to 16px the scrollbar then shows up. Resolution is 1920 x 1080 on display. Any ideas why the 8px doesn't show?

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
    z-index: 1;
}
4

We've tested on various Mac configurations however everything worked normally. You can remove the scrollbar styling completely if you want:

5

I've had the same issue on a desktop app running in WebView2. Tracked it down to the border setting of the scrollbar:

body:not(.rz-default-scrollbars) ::-webkit-scrollbar-thumb {
  background: rgba(141, 142, 144, 0.5);
  border: 4px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  border-radius: 8px;
}

The 4px transparent border causes an 8px width scroll bar to be rendered as hidden. The scroll bar is only visible if the border is assigned a colour or if the scrollbar width is increased to greater than 2 x the border width.

6

As an older programmer dealing with cataracts, I needed to be able to see the scroll bars in the new Material 3 style better. I love the style, but was wrestling with finding the scroll bars on some machines.
I needed some code to highlight them on mouseover...

A couple of snippets fixed me up.
CSS

/* Customize the scrollbar track */
::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* Customize the scrollbar thumb */
::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 5px;
}

    /* Customize the scrollbar on hover */
    ::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }

And a smidge of Javascript

// Wait for the DOM to be ready

document.addEventListener("DOMContentLoaded", function () {
    // Check if the browser supports scrollbar customization
    if (typeof CSS !== "undefined" && CSS.supports("scrollbar-width", "thin")) {
        // Apply the custom scrollbar styles
        document.documentElement.style.scrollbarWidth = "thin";
        document.documentElement.style.scrollbarColor = "#888 #f1f1f1";
    }
});