CODEWITHSUNDEEP
modal-dialogvmware-clarity
Albert Hoekstra
Albert Hoekstra

Reputation: 128

Clarity Full screen modal

I'm using VMware Clarity UI framework, and it is great. It has some modal features, but I'm looking for a full screen modal. Clarity comes with certain size's but not with a fullscreen one.

Anyone know how I can make a clarity modal fullscreen?

Upvotes: 0

Views: 2341

Answers (1)

hippeelee
hippeelee

Reputation: 1808

The Clarity modals are designed for alerting the user, confirmation dialogs, and task-oriented workflows. Generally, these are tasks that require focus and attention from the user but we don't want to take them completely out of the context that sits behind the modal overlay. They were not designed for full screen usage.

I would not suggest using a full-screen modal where the context is completely hidden from your users.

That said, Clarity modals can be overridden with CSS. Here is an example that starts to modify Clarity styles to make a full screen modal. Please keep in mind that Clarity modals were not designed for full screen and that some elements of a modal may also need to be tweaked to behave for your use case.

https://stackblitz.com/edit/clarity-dark-theme-v11-so-full-modal-css

fyi - in order to override the css of an Angular component you will need ::ng-deep to override the specific classes that need to be tweaked. e.g:

::ng-deep .modal-content-wrapper {
   height: 100%;
   width: 100%;
}

Upvotes: 3

Related Questions