How to calculate height of app content area of AppShell

[samuel-1184]

Hi,

Very nice component, loving it!

I'm using AppShell with navbar, aside, and footer. Navbar and aside has built-in section with auto grow where I can put list of items in scroll area with ease. However, I'm wondering whether there is built-in support for putting scroll area in the app content area to avoid the browser vertical scroll bar. If not, I can put a scroll area in the app content, but is there a suggested apporach to calculate the height of the scroll area (excluding header and footer )? Thanks in advance.

Samuel

[rtivital]

Try <ScrollArea h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px))" />

[samuel-1184]

Thanks for the quick response and this works like a charm! The only thing is that I can still see the scroll bar from the browser. I think the root cause is a magic number 16px in mantine-AppShell-main:

padding-top: calc(var(--mantine-header-height, 0px) + 16px);
padding-bottom: calc(var(--mantine-footer-height, 0px) + 16px);

Currently I'm overwriting padding top and bottom in styles property of AppShell to remove 16px. Is this the right approach or how can I overwrite 16px though I failed to find it in the codebase? Thanks!

[rtivital]

<AppShell padding={0} />

[paynejj]

If anyone sees this in the future, --mantine-header-height and --mantine-footer-height have been renamed to --app-shell-header-height and --app-shell-footer-height.

[ajdiyassin]

Legend

[Pirulax]

Anyone knows where I can find docs on these css vars?
The CSS variables list (from the docs) doesn't contain it

[ericclemmons]

Glad I found this issue! Within <AppShell.Main>, h="100%" seems to do nothing no matter what I tried with "normal CSS".

❌

<Center h="100%">
  Doesn't work
</Center>

✅

<Center
  h="calc(100vh - var(--app-shell-header-height, 0px) - var(--app-shell-footer-height, 0px) - var(--app-shell-padding) * 2)"
>
  Does
</Center>