Popup Page UI

0
How to reduce width of popup page?
asked
4 answers
0

Hi Ahmed,


You can find the popup width setting showcased in the image below. Just set it to your prefered width.

If this helps, please accept the answer.


Best regards,

João

Setup Popup Width

answered
0

you can check that page property there is you can change pop-up size
Please check the screenshot

answered
-1

Hi Ayman Ahmed,
You can also adjust the Height and Width of the Popup page in styles
Refer the bellow style


.modal-dialog{

height: 380px;

width: 600px;

}

But you can't resize it in UI. This is only for fixed size popups

answered
-1

Hi,


In Mendix, popup page width is controlled by the page layout and Atlas UI classes.

To reduce the width, you can:

  1. Set the page layout to Popup Layout (Atlas_Default or similar) and choose a smaller size (e.g., Small instead of Full Width).
  2. Wrap your content inside a container and apply a custom class, for example:

.custom-popup {
    max-width: 500px;
    margin: auto;
}

Then assign this class to the main container.

  1. Alternatively, use Atlas spacing/width classes like:
  • mx-auto
  • col-md-6 or col-lg-4

This ensures the popup remains centered while reducing its width.

answered