2

Can anyone show me how to make a MudTable that has FixedHeader=true but that also expands to fit 100% of the vertical height of the parent container?

If I set the height property to a pixel height (e.g., Height=300px) on the MudTable element, then the fixed header works and the table content scrolls. But if the parent container/dialog/page is bigger than 300px, then the table doesn't expand to fit the space provided.

But if I set the height to 100%, either:

  • The MudTable expands to fit the number of items in the table, and overflows the bottom of the parent element
  • Or the fixed header doesn't work, and the entire table scrolls within the parent element, meaning the header doesn't remain fixed at the top of the table.

If it helps, my table is within a FlexBox, with 3 sections:

  • A header section, which should be static at the top of the page/dialog/container
  • A button bar, which should be at the bottom of the page/dialog/container
  • A MudTable, which should expand to fill the remaining space on the page, and which should have a fixed header, with the content scrolling within the grid if there are more items than will fit.

I've been trying to find a solution to this for literally years, across multiple projects, and never managed it. Is this even possible? If so, can somebody point me at an example that shows the exact combination of CSS that'll do it?

Here's a small repro of what I'm trying to achieve - the 'Save' and 'Close' buttons should be at the bottom of the page, the title at the top, and the table should fill the space in the centre, but have a fixed header.

https://try.mudblazor.com/snippet/wkQplEEQfkzvCAoi

Note that if you change the MudTable height from 300px to 100%, instead of filling the space provided, it expands to go off the bottom of the page, meaning the Save and Close buttons are no longer on screen - and the fixed header no longer works.

Improve this question
7
  • 1
    I suggest you create a minimal reproducible example to demonstrate your problem. It makes life a lot easier for anyone trying to provide an answer, And more likely you will get an answer! Commented Oct 2 at 9:41
  • If I understood correctly, you want a div that can fill the remaining height of its parent, with a header staying at the top of that parent? If so, check if this codepen helps you. Commented Oct 2 at 13:31
  • @Matoshiro - that's standard HTML and not MudBlazor. Commented Oct 2 at 14:06
  • 1
    Well, I did the same thing with MudBlazor : try.mudblazor.com/snippet/QuGfbkYmToBQNXOn I can't see a way of doing it without knowing the height of the header and footer. Commented Oct 2 at 15:20
  • That's not a bad solution as a hacky workaround. That said, I still don't really understand why this shouldn't be possible even if the footer and header are variable-height. But thanks, I'll try using your solution as a short-term workaround until a proper fix comes along. Commented Oct 3 at 9:01
Related questions
1171
How to set the Content-Type header for an HttpClient request?
1
MudBlazor/MudTable fix table height
6
How to stop Mud Blazor MudTable column from expanding to fit text
Load 4 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.