search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 761 forks source link

Creating a full size modal #1344

Closed luis-cortina closed 7 years ago

luis-cortina commented 7 years ago

I need to display a video on a modal (I'm using the angular component) and I wan't the modal to occupy 100% width and height of the screen. I know currently there are only 4 supported sizes.

Is there a way I can do this with the angular component?

Thanks,

Luis

mathisscott commented 7 years ago

Here's an example Plunkr: https://plnkr.co/edit/4AxFJOMiEgqNBppPYKDP

The basic CSS required is in index.html

You would need to clean a few things up and add some proprietary flexbox styles as well. But the gist of it is in the plunkr.

luis-cortina commented 7 years ago

Thanks!!!

anil1712 commented 7 years ago

Yeah, plunkr is working fine. But I am putting the CSS code under my style.css file but it seems not overriding the modal css properties.

If I put those CSS into index.html, then it works completely fine Anyone also facing the same issue.

Also one thing I found, the modal is unable to render some external components. I tried to integrate below components into clarity modal, but I got only while screen. This fullcalendar is not coming under the modal popup https://github.com/lbertenasco/ap-ng2-fullcalendar

Also Its happening with this repo also. https://github.com/Ledzz/angular2-tinymce

Thanks, Anil

github-actions[bot] commented 4 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.