DataGrid iOS/macOS Horizontal Table Rendering Issue

Radzen.Blazor Components
1

When accessing my Radzen web application across different platforms, the DataGrid component behaves inconsistently on Apple devices (iOS and macOS). While on Android and Windows PC, the tables maintain their proper width and allow horizontal scrolling to view all data, on iOS (iPhone) and macOS the tables automatically shrink to fit the screen width, making the content unreadable and unusable.

Steps to Reproduce

  1. Access the Radzen web application through a browser
  2. Navigate to a page containing a DataGrid component with many columns
  3. Compare the behavior on different devices:
  • On Android/Windows: Table maintains its width and allows horizontal scrolling
  • On iOS/macOS: Table shrinks/compresses to fit the screen width, making content unreadable

Expected Behavior
DataGrid should maintain its proper width and allow horizontal scrolling on all platforms, including iOS and macOS, matching the behavior on Android and Windows platforms.

Actual Behavior
On iOS and macOS devices, the DataGrid automatically resizes to fit the screen width, compressing all columns into the available space rather than maintaining column widths and enabling horizontal scrolling. This makes the data unreadable and the interface unusable.

Attempted Solutions

  • Added -webkit-overflow-scrolling: touch to body and container elements
  • Verified that overflow-x: auto is properly set
  • These solutions did not resolve the issue
2

Here is what I see on the first DataGrid demo using latest iOS:

IMG_7570
IMG_75702778×1284 272 KB

3

Hi Enchev,

Thank you for your time.

To make things clearer, I’ve attached images.
This is the correct rendering of the large DataGrid — it displays well on all platforms except iOS:

image
image368×106 6.56 KB

And here is how it appears on macOS/iOS with smaller screens (apologies for the image quality):

image
image527×207 19.5 KB

Whether there's data or not, or regardless of the browser used, the issue persists.

Edit **

My coworker says it works well on chrome on mac, but not safari. The client says it doesnt work properly on either browser on her iphone

Thanks !

4

Hi @Sam1,

Have you tried setting column widths as shown in the demos?


<RadzenDataGrid ... ColumnWidth="300px"> /* Applied to all columns without explicitly defined Width="" */
...
    <RadzenDataGridColumn ... Width="160px" />
    <RadzenDataGridColumn ... Width="160px" />
    <RadzenDataGridColumn ... Width="200px" />
    <RadzenDataGridColumn />
...
</RadzenDataGrid>
5

Hi Yordanov !

I still don't understand why it behaves inconsistently, but I guess i'll go with your solution.

Thanks for your time