MudDataGrid: Fix Filter Panel Positioning with FixedHeader = true #10292
Conversation
…the appropriate location in razor markup
github-actions
bot
added
bug
|
|
The only way to fix this would be to add an exception case in mudPopover.js? If there are no other good alternatives, I probably wouldn’t fix it at all. I don’t think it's ideal to apply patches to individual components in popover. I made an exception for MudList (#10216) because the popover menu with list is a logical part of the popover, but the filter panel is not.
@henon @danielchalmers, thoughts? |
I may have found a razor solution. Working on it now. |
Now it looks good to me |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## dev #10292 +/- ##
=======================================
Coverage 91.42% 91.42%
=======================================
Files 415 415
Lines 13039 13039
Branches 2475 2475
=======================================
Hits 11921 11921
Misses 551 551
Partials 567 567 ☔ View full report in Codecov by Sentry. |
It does push down the first row when you open the filter menu now. It's not bad but it is there. I can't seem to remove it. And in it's new position it does it for all. |
It's actually adding a new row (I deleted the popover element in the image)
<tr class="mud-table-row" style="visibility: hidden; opacity: 0;overflow: hidden;"><th colspan="2" class="mud-table-cell mud-filter-panel-cell"><!--!--><div id="popover-1a882d7d-ab12-4347-8146-82bc5b76552a" class="mud-popover-cascading-value"></div></th></tr>The fact that it's hidden instead of collapsed means it's taking up space and shifting everything else. I'm not super familiar with the datagrid so no idea why it's there or styled like that. |
I will look again, not sure I can keep it from shifting rows. The existing rows are solid, but also dynamic so I couldn't add it there. It needs a parent to relate to so I added the row. When scrolling it takes the row to the "top" of the grid which moves the popover to the top of the grid. I added a top: 58px to push it down (which is pushing the row). I'll work on it some more this weekend. |
it was as simple as setting visibility: collapse instead of hidden. I'll take it. Checked all datagrids (with filter simple) in datagrid examples as well as the test subject. |
henon
changed the title
|
Thanks @versile2 |
|
Thank you @versile2 ! |
|
Hi @versile2, thanks for this work! I was looking out for a solution to this bug for a while. When I tried it out, the behavior is a little different than expected. When scrolled down, I expect the filter pop-up to show below the header like it does when scrolled up and like your screenshots show. Instead, it covers the header. Is this something that can be fixed? |
|
I don't believe this PR is in Version 7, in V8 it works perfectly. You can try it out and see if your issue is fixed at https://try.arctechonline.tech Note the try I host does not save snippets so you will have to copy/paste code. Also if you have time let me know either way and if not Give me some code to replicate. |
|
I should have mentioned I am using V8. The code snippet I'm testing with is from the test component in your PR: Interesting, I see it does work correctly in the playground, but the exact snippet in my project works differently. I'm on .NET 8 though. I'll see if I can find if it's another library or something interfering with the css. |
Make sure to refresh css files and/or try in "private or incognito" mode to force reload of css. I've had that issue myself with this version and so many style changes. |
|
Also that's preview 6 or 7 I'm hosting (I don't remember which block I copied that from but the datetime stamp is correct) |
|
Oops, turns out it was some custom css I added a while back and forgot about. After getting rid of that it works perfectly. Thanks again for the fix! |
I suspect there might be some of that with V8, so many of the popover issues will be fixed. Thanks for the feedback, hopefully it's all good but don't hesitate if it's not. |
|
One small thing I noticed is that it doesn't take into account Dense="true". The shorter row height causes a gap between the header and filter popover. |
|
@versile2 I found that the same problem exists with the Column Panel menu. I can open a new issue, but wanted to comment here first because I think the fix will be similar to the filter panel. See example here (only difference from the example in this PR is the ShowMenuIcon option) The behavior is the same in V8, the link is just so I could save the snippet easily. |
Make a new issue if you could. Tag me in it. Also include #10292 so I can reference back here and the Dense problem if it still exists. |
Description
Filter Panel when DataGridFilterMode.Simple is placed in which scrolls normally even under Sticky Header conditions. I was not able to relocate the components to any other part of the table without ill side effects and none that rendered the panel where it needed to be. Added js exception handling in mudPopover.js to relocate any filters-panel to the first headercell in a table when opened.
Resolves #10282
How Has This Been Tested?
Visual Tests, new component to test with as well as going through entire doc page for DataGrid testing.
Type of Changes
Checklist
dev).