carbon-components-svelte
carbon-components-svelte copied to clipboard
Modal position inside UIShell with a Header
Description
When opening a Modal in a UIShell with a Header, it is positioned as if no Header was present, only taking into account a max-height: 90%
of its parent. Therefore, the Modal footer is cut when the screen is not tall enough.
![Svelte screen capture desktop](https://user-images.githubusercontent.com/26429103/95346955-acbeee80-08bc-11eb-8da8-739772ef6075.png)
Moreover, when opening it in a mobile device, it is far taller and the footer is never shown, as the body is not scrollable due to the bx--body--with-modal-open
class.
![Svelte screen capture mobile](https://user-images.githubusercontent.com/26429103/95346963-ae88b200-08bc-11eb-9f12-a2a59fd606bc.png)
Question
Should the Header component be hidden behind the modal, filling the whole viewport size? Or maybe just shrink the height of the modal and vertically centre it inside the Content
component?
This is probably a design decision by Carbon. https://github.com/carbon-design-system/carbon/issues
Aside from being a design decision by Carbon, a possible workaround like this one could fix the issue, leading to a properly centred Modal window:
/* for explanatory purposes */
:root {
--header-height: 3rem;
}
.bx--modal-container {
position: relative;
bottom: calc(var(--header-height) / 2);
height: calc(90% - var(--header-height));
}