MudTable/MudDataGrid: Fix row background color for mobile view.#7306
Conversation
github-actions
bot
added
bug
Codecov ReportPatch coverage has no change and project coverage change:
Additional details and impacted files@@ Coverage Diff @@
## dev #7306 +/- ##
==========================================
- Coverage 91.17% 90.62% -0.55%
==========================================
Files 392 427 +35
Lines 14836 15152 +316
==========================================
+ Hits 13527 13732 +205
- Misses 1309 1420 +111 ☔ View full report in Codecov by Sentry. |
|
@henon Can someone review this PR to fix this bug? It would be nice if it works correctly in my application. |
|
Ok, this is simple enough. I take it you checked with your fix on desktop as well? |
|
Hi henon, thanks for the reply. Desktop Windows:
On Android Mobile:
On iPad / iOS:
|
|
Thanks @KBM-Kevin-Kessler |
|
Thanks @KBM-Kevin-Kessler. Don't hesitate in future to ping the members more early, because we do miss PR sometimes. |
|
Hey @ScarletKuro. Thanks for letting me know. I was kind of scared it would be rude to do. You probably have a lot of other issues and pull requests to handle, which are more important. |
3 participants
Description
This PR fixes a CSS issue for the MudTable and MudDataGrid, which prevents to apply any background color to the rows and cells, when the table is in mobile view.
See MudTable example "Click Event and display for selected Row" utilizing RowClassFunc and reduce width to trigger Mobile View:
MudTable
See MudDataGrid example "Advanced Data Grid", enable hover and striped, change to dark mode (to see striped, default striped color in light mode seem not different), compare with MobileView:
MudDataGrid
Resolve #4468
What changed in the code
I changed the styles.scss and replaced "display: initial" with display: revert" for the .mud-table-row class (for small devices).
"display: revert" is supported by all Browsers since April 2021. MDN
"display: revert" changes the display back to it's default value for the element, which is table-row.
"display: initial" changed the display to inline, which caused the error.
I could remove the display property totally from the class, which works also, but I was not sure if this would lead to a breaking change, if the display is set on a parent element. That's why I chose to use "display: revert" instead to avoid a breaking change.
Screenshots before:
Normal View
Here you can see how it looks in selected state, and hover, when using the RowClassFunc to change background color.
Mobile View
Here you can see, how the selected element (2nd) does not have a different background color, only a different font color (white).
Also the hovered and striped items does not have a different background color.
Screenshots after:
Mobile View
Here you can see the selected using the RowClassFunc row.
Here you can see the striped rows and hovered row (3rd row)
How Has This Been Tested?
I run all unit tests.
I run WASM Host and visually checked on MudDataGrid and MudTable if the striped and hover color works in mobile view. On MudTable I cheked the example, which changes the background color. Now it looks like expected.
Types of changes
Checklist:
dev).