Thanks to visit codestin.com
Credit goes to github.com

Skip to content

MudDataGrid: Fix mobile loading indicator#13230

Merged
danielchalmers merged 1 commit into
MudBlazor:devfrom
sjh9714:fix-datagrid-mobile-loading-indicator
May 31, 2026
Merged

MudDataGrid: Fix mobile loading indicator#13230
danielchalmers merged 1 commit into
MudBlazor:devfrom
sjh9714:fix-datagrid-mobile-loading-indicator

Conversation

@sjh9714

@sjh9714 sjh9714 commented May 20, 2026

Copy link
Copy Markdown
Contributor

Fixes #12091

The mobile table layout hides the normal header rows, but a fixed-header DataGrid still inherited the desktop sticky header offset for the loading row. That left the progress bar stuck 59px below the top of the hidden header and visually overlapping the first mobile data row.

This scopes the override to MudDataGrid responsive breakpoint classes so the loading cell uses top: 0 only while the mobile table layout is active. The existing desktop sticky-header offsets remain unchanged.

Visual check:

  • Before: the screenshot in MudDataGrid: Loading indicator not working on mobile #12091 shows the loading bar crossing the first mobile row.
  • After: locally verified the Other Options DataGrid at 390x844; .mud-table-loading computed top is 0px, the progress bar ends at y=629.3, and the first body cell starts at y=629.3, so the loader no longer overlaps row content.

Checklist:

  • I've read the contribution guidelines
  • My code follows the style of this project
  • I've added or updated relevant unit tests where applicable (CSS-only visual fix; no component logic changed)

Testing:

  • dotnet --version -> 10.0.107
  • dotnet restore src/MudBlazor.UnitTests/MudBlazor.UnitTests.csproj
  • dotnet test --project src/MudBlazor.UnitTests/MudBlazor.UnitTests.csproj --no-restore /p:SkipBunCompile=true -- --filter "FullyQualifiedName~DataGridLoadingProgress" --output Normal --no-ansi --hangdump --hangdump-timeout 30s
  • dotnet tool run bun -- wrapper --version 1.3.14 -- install --frozen-lockfile
  • dotnet build src/MudBlazor/MudBlazor.csproj --no-restore --nologo
  • dotnet restore src/MudBlazor.Docs.Server/MudBlazor.Docs.Server.csproj
  • dotnet run --project src/MudBlazor.Docs.Server/MudBlazor.Docs.Server.csproj --no-restore --urls http://127.0.0.1:5012
  • Playwright mobile viewport visual check at 390x844 against /components/datagrid#other-options
  • dotnet format whitespace --no-restore --include MudBlazor/Styles/components/_datagrid.scss
  • git diff --check

Note: I used Codex to help inspect the code path and verify the local visual behavior, but I reviewed the final diff and ran the listed verification commands locally.

@mudbot mudbot Bot added bug Unexpected behavior or functionality not working as intended device: mobile Only affects small viewports or touch screens labels May 20, 2026
@mudbot mudbot Bot changed the title DataGrid: Fix mobile loading indicator (#12091) MudDataGrid: Fix mobile loading indicator May 20, 2026
@danielchalmers danielchalmers merged commit b9c4c87 into MudBlazor:dev May 31, 2026
12 checks passed
@danielchalmers

Copy link
Copy Markdown
Member

Thank you!

This was referenced Jun 27, 2026
This was referenced Jul 2, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Unexpected behavior or functionality not working as intended device: mobile Only affects small viewports or touch screens

Projects

None yet

Development

Successfully merging this pull request may close these issues.

MudDataGrid: Loading indicator not working on mobile

2 participants