Resize pop up

  

Hi all,

I have three pop up screens which is followed one by one. The content of the second and third pop up screen is less when compared to the first. I want to resize the second and third pop up screen according to the content. So I followed the steps mentioned in the below link. 

https://success.outsystems.com/Documentation/Development_FAQs/How_to_dynamically_resize_a_pop-up_window


The height of the screen is adjusted. However width is not. 

The Second Pop up:

how to overcome this issue? is there any javascript code to modify width too?


Regards,

Hi Iniyavan,


The Popup width gets automatically adjusted (in case of Popup_Editor Richwidget width property is unset) as per the content occupied width in the popup screen i.e. Popup Screen web-block LayoutsOther\Layout_Popup MainContent placeholder. Could you please elaborate your issue with more context, we may be able to better help you.


Kind Regards,

Benjith Sam

Hi Iniyavan,


You can set height & width according your requirement. For that just click on popup icon and set the property.


Thanks ! 

Iniyavan M wrote:

Hi all,

I have three pop up screens which is followed one by one. The content of the second and third pop up screen is less when compared to the first. I want to resize the second and third pop up screen according to the content. So I followed the steps mentioned in the below link. 

https://success.outsystems.com/Documentation/Development_FAQs/How_to_dynamically_resize_a_pop-up_window


The height of the screen is adjusted. However width is not. 

The Second Pop up:

how to overcome this issue? is there any javascript code to modify width too?


Regards,


Hi Iniyavan,


The link you are looking they use javascript only for height, not for width try this below i added width together,


function PopupEditor_ForceResize() {
    var popupDiv = window.top.$(".os-internal-ui-dialog-content");
    var popupDivOldHeight = popupDiv.height();
    var popupDivOldWidth = popupDiv.width();
    // reduce iframe's div height to its contents
    popupDiv.height($(".MainPopup").innerHeight());
    popupDiv.width($(".MainPopup").innerWidth());
    // pop-up editor already auto-grows, so we just need to address auto-shrink
    if (popupDiv.height() >= popupDivOldHeight || popupDiv.width() >= popupDivOldWidth) {
        return false;
    }
    var result = window.top.RichWidgets_Popup_Editor_resize(popupDiv, -1, -1, false, {target: popupDiv});
    if (!result) {
        // something wrong happened in resize - reset iframe's div height
        popupDiv.height(popupDivOldHeight);
        popupDiv.width(popupDivOldWidth);
    }
}

Thanks,

Balu

Balu wrote:

Iniyavan M wrote:

Hi all,

I have three pop up screens which is followed one by one. The content of the second and third pop up screen is less when compared to the first. I want to resize the second and third pop up screen according to the content. So I followed the steps mentioned in the below link. 

https://success.outsystems.com/Documentation/Development_FAQs/How_to_dynamically_resize_a_pop-up_window


The height of the screen is adjusted. However width is not. 

The Second Pop up:

how to overcome this issue? is there any javascript code to modify width too?


Regards,


Hi Iniyavan,


The link you are looking they use javascript only for height, not for width try this below i added width together,



function PopupEditor_ForceResize() {
    var popupDiv = window.top.$(".os-internal-ui-dialog-content");
    var popupDivOldHeight = popupDiv.height();
    var popupDivOldWidth = popupDiv.width();
    // reduce iframe's div height to its contents
    popupDiv.height($(".MainPopup").innerHeight());
    popupDiv.width($(".MainPopup").innerWidth());
    // pop-up editor already auto-grows, so we just need to address auto-shrink
    if (popupDiv.height() >= popupDivOldHeight || popupDiv.width() >= popupDivOldWidth) {
        return false;
    }
    var result = window.top.RichWidgets_Popup_Editor_resize(popupDiv, -1, -1, false, {target: popupDiv});
    if (!result) {
        // something wrong happened in resize - reset iframe's div height
        popupDiv.height(popupDivOldHeight);
        popupDiv.width(popupDivOldWidth);
    }
}

Thanks,

Balu


Hi Balu,

I included the javascript for width too. But it doesn't work.

Thanks.

Can you check, if you have javascript errors


Thx,

Balu

Hi Iniyavan M,

Are you navigating to different screens from inside the Popup? This scenario isn't something I've faced myself, as typically popups display a screen and are either parts are Ajax Refreshed or the popup is closed.

If your situation requires navigation between several screens within the context of the popup, consider Ajax Refreshing your new screens, as the AutoResize property's description specifically mentions the popup will be resized after an Ajax Refresh.

Also make sure that, on the Popup_Editor you use to open the popup, the AutoResize property is either set to True or left blank, and that RecenterOnResize is set to True (so your popup is still centred after width changes).