Radzen Component Scroll Issue in Blazor Server with Flutter WebView

Radzen.Blazor Components
1

I'm currently facing an issue with a Blazor Server application where I'm using the Radzen component. Specifically, the problem arises with a RadzenFormField that includes a RadzenDropDown for selecting installment options.

Here's a snippet of the code I'm working with:

<RadzenFormField Text="Installments" Style="@(InstallmentErrorStyle ?? "margin-bottom: 0px; display: flex; flex-direction: column;")" class="@(errors.ContainsKey("Nparcelas") ? "rz-state-focused" : "")">

<RadzenDropDown Data="@GenerateInstallmentOptions(filialState.Npagsegparcela)"
TextProperty="Text"
ValueProperty="Value"
@bind-Value="payment!.Installments"
Name="installments" Style="width: 85px;" />


@if (errors.ContainsKey("Installments"))
{

@errors["Installments"]

}

The problem is that a scrollbar appears normally when running the application in a standard web browser. However, when I load the Blazor web page within a Flutter WebView on a mobile device, the scrollbar is not visible. This is causing issues with user interaction, as they can't scroll through the options in the dropdown.

2

Hi @Diogo_Costa,

Are other elements scrollable or just RadzenDropDown shows the problem? What if you move it outside of RadzenFormField?

3

On mobile:
image

On web:
image

I placed the dropdown outside the formfield but the same behavior occurs.

It only has this scrollable element, on the web it works normally but when moving to mobile in a webview on the flutter the scroll bar does not appear.

4

I've tested it using pure html now and I believe the problem isn't with radzen at all, the scroll bar doesn't appear on mobile either. I'll take into account that it's redundant to implement a scrollbar on mobile.

5

This shouldn't be the case. We are not familiar with the flutter webview but disabling scrolling globally doesn't sound right. Try searching online for any scrolling related issues. There is probably something out there.

1 Like