How to change the width of modals to a specific % based on page width?

Wappler General How To
#1

Hi Wapplers

I am trying to work out how to adjust the size of the Modal element so that it maintains a specific % width based on the size of the browser window.

I want more control over the modal width than is currently available out of the Wappler box.

I have had a look and tried different approaches but I assume that it’s not as hard as I am making it out to be.

Any help would be appreciated!

Thank you!

#2

These are the Bootstrap values for an XL sized modal

@media (min-width: 1200px)
.modal-xl {
    max-width: 1140px;
}
@media (min-width: 992px)
.modal-lg, .modal-xl {
    max-width: 800px;
}

@media (min-width: 576px)
.modal-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
}
1 Like
#3

Thanks @ben

Is there a way to specify %

If I wanted the modal to maintain a 50% screen width no matter the screen width or media type?

#4

Try adding the following style rule

.modal-lg {
            max-width: 80%;
 }

Edit: You will need to include the selector as in

<div class="modal-dialog modal-lg" role="document">

2 Likes
#5

Thanks @ben !

I ended up using the following and works a treat!

.modal-lg {
            max-width: 60%;
            min-width: 400px;
            margin: auto;
            
 }
3 Likes