resizing a richwidgets\popup at runtime

We have a popup in which the size of the contents (width and height) changes depending on what the user clicks on in the popup (mainly tabs right now).  I have set the width to be set, but the height does change.  Is there a way to resize height and width of a popup dynamically?
Hi Jason,

You should set the "AutoResize" parameter of the Popup_Editor widget to "True". It should then resize when you Ajax refresh the content.
Underneath that, you also have an optional "RecenterOnResize".
Kilian and Tiago,

The issue we are having is that the auto resize works going bigger in either width or height, however it does not work going back the other direction.  So if my popup starts at say 4 col width and a tab grows the page to 7 col, when I go back to the 4 col tab you have white space to the right of the content and it does not "auto shrink".  The same thing in the height if a tab is long height wise and you go to a shorter height content tab, the popup does not resize.
Ok, maybe this is what I am missing: for both of those fields it says "after an ajax refresh" so if my tabs change do I need to do an ajax refresh of the whole popup?
Hi Jason,

The pop-up not resizing back when the content gets smaller is a known issue, that OutSystems doesn't want to address. See here for more information.
Unfortunately, popups are a strange beast in OutSystems :)
nice!  I got it looking decent for what I wanted but still, if you have resize, that does not mean resize in one direction :P

Old post, but in case other people are looking, you can do the auto-shrink with something like this code snippet

function PopupEditor_ForceResize() {
    try {
        var popupDiv =$('.os-internal-ui-dialog-content');
        var popupIframe =$('.os-internal-ui-dialog-content iframe:first');
        var popupIframeOldHeight = popupIframe.height();
        // reduce iframe height to its contents
        var mainPopupHeight = document.getElementsByClassName('MainPopup')[0].clientHeight;
        // pop-up editor already auto-grows, so we just need to address auto-shrink
        if (popupIframe.height() >= popupIframeOldHeight) {
            return false;
        var result =, -1, -1, false, {target: popupDiv});
        if (!result) {
            // something wrong happened in resize - reset iframe height
    } catch (err) {}


Place that JS on your webscreen, then in a server action where you think your popup content can shrink, do a HTTPRequestHandler/RunJavaScript and call the action 


That code is from

Happy OSing!

Hello, I have a similar problem as above and tried to use this solution without success.

In my case I have a Popup that presents a table (table records) with pagination (using the List-Navigation widget from Rich Widgets). The number of lines by page is 10, except in the last page. What I want is to the popup to shrink once it gets to the last page (when there are fewer lines).

I've tried to implement this solution by copying the code to the javascript field of the Webscreen (of my popup), and placing the RunJavaScript action on the PageRefresh action associated with the OnNotify field of the List-Navigation widget.

I haven't changed anything in the code and have placed the RunJavascript action after the ajaxrefresh (that refreshes the main div of the pop-up) widget in my PageRefresh action.

I am using serice studio version 7.0.

Try this:

SyntaxEditor Code Snippet

function PopupEditor_ForceResize() {
    var PopUpFrame = window.self.frameElement;
    var PopUpDocument = window.self.document;
    var popupDiv = PopUpFrame.parentElement;
    var popupDivOldHeight =;
    // reduce iframe's div height to its contents"px";
    // pop-up editor already auto-grows, so we just need to address auto-shrink
    if (popupDiv.height() >= popupDivOldHeight) {
        return false;
    var result = window.self.RichWidgets_Popup_Editor_resize(popupDiv, -1, -1, false, {target: popupDiv});
    if (!result) {
        // something wrong happened in resize - reset iframe's div height