Change the width of a PopUp

 

Popup windows have a fixed width of 900 px by default, but it is possible to modify this value and customize the popup.

You can assign both a Fixed Width and a Minimum Width to the pop-up, for this, we identify the class that assigns this "Width". In our example to identify the class, we use the browser's inspect option:

A browser DevTools session inspects a "Pop Up Example" popup on the popupexampleww.aspx page, highlighting the gx-popup-document HTML element and its inline style min-width:900px; height:auto; width:900px in the Elements and Styles panes, illustrating how the popup's width is set.

We see that the class that assigns a "min-width: 900px;" is "gx-popup-document".

 

In order to modify this class, we have to enter from WorkWithPlusTheme, where we identify the class "gx-popup-document". In the case that it is not found, it can be created from Custom >> Add Class:

The WorkWithPlusTheme editor's Styles tab shows the Custom node in the class tree with the gx-popup-document class filtered in the search box, and a context menu open with "Add Class" highlighted, illustrating how to add a custom CSS class targeting the popup document element.

In the class, we can assign a "min-width" for a minimum width that we want, or a "width: auto" if we want it to adapt to the size of the content. In addition, it will be important to add these properties in "Custom Properties" with the rule "!Important" to overwrite any class that assigns a width to the pop-up:

min-width: 1200px !important;  

The WorkWithPlusTheme editor shows the gx-popup-document custom class selected in the Custom node, with the Properties panel's Advanced section displaying a Custom Properties entry set to "min-width: 1200px !important;", used to override the popup's minimum width.

If you use Design System Object simply add the class as shown in the image:

The GeneXus IDE Styles code view for the WorkWithPlusDS styles object shows a "styles WorkWithPlusDS" block that imports WWPBaseObjects.WorkWithPlusBaseDS and defines a .gx-popup-document rule setting min-width: 1200px !important.

Then we save the changes and execute, the result is this:

A DVELOP web page (popupexampleww.aspx) shows a modal titled "Pop Up Example" over a list toolbar with an "Insert" button, containing a "General Information" section with "Example Id" and "Example Name" fields and "Confirm"/"Cancel" buttons, alongside a dark sidebar menu listing Applications, Repositories, Roles and Pop Up Example.

Other properties, which are usually assigned to this class are "width: auto" (So that the popup fits the content), "Overflow: hidden" (So that the popup hasn't scroll).