UI Modal set the parent to document

[jariesdev]

Can we set the Modal (ui-modal) use the entire document size when opened or custom set the parent container.

I assume that this is now available yet.

[JosephusPaye]

Hi @jariesdev,

You can make the modal fullscreen using a custom size and some CSS:

Template (note the size="fullscreen"):

<ui-modal
    title="Fullscreen modal"
    ref="modal"
    size="fullscreen"
    transition="fade"
>
    This is a fullscreen modal.
</ui-modal>

Style:

.ui-modal--size-fullscreen .ui-modal__container {
  width: 100vw;
}

.ui-modal--size-fullscreen .ui-modal__body {
  height: calc(100vh - 3.5rem); /* 3.5rem is the height of the modal header */
}

See https://codepen.io/JosephusPaye/pen/ErVMJg for a demo.