I want to create a PopUp window that covers the entire screen.
However, a problem arises where the top and bottom of the pop-up are not completely covered.
The css was written as follows.
How to make it full screen?
Hi @Yeongeun Seo
if you want that popup will always set as full width and height of the screen then you need to set the min-width and min-height property of the popup.
you can override this by using a class and then apply this css on that class
min-widht: 100%;
min-height: 100vh;
i myself tried the same thing and it worked.
hope this will help you.
Thanks to you, I solved it.
Thank you everyone.
Hey Yeongeun,
You can use a custom style class for the popup such as below,
.popup-dialog.custom-style
{
height : 100vh;
width : 100vw;
}
And then in the popup style attribute you can add the style class name next to the default popup style class "popup-dialog custom-style" to get the style class you require. You can also add other styles if required in the CSS while creating the class.
Hi @Yeongeun Seo I would go with Mukesh Kumar's suggestion, I would also suggest removing the inline styling you've previously added to avoid conflict with the solution provided above.
As much as possible, try to avoid inline styles to prevent unusual behavior, and it is hard to maintain. It is best to use style classes, declared in the Theme.