Tip: Resizing Popups in Runtime

Tip: Resizing Popups in Runtime

  
This is a frequent question, and one that isn't very clear on how to solve it.

One way to do it is to use the attached eSpace. There you'll find a webblock that you should add to the page that pops up the dialog. You'll also find an action that you should add in the popup webscreen so that the popup dialog resizes to its content.

Here are a couple of things to bear in mind:

 - Dynamic dialogs don't bound to screen size, this resize action also doesn't
 - Resize action ignores initial setting of width and height, so probably you shouldn't use this for fixed size popups
 - Be sure to put the action after the Ajax Refresh widget so that the page is refresh before the resize action triggers.

This should work for both Popup_Editor and Popup_InfoBalloon.

If that doesn't work, an alternative is to resort to CSS or Javascript code inside an unescaped expression.

In Javascript, it should be something like

document.getElementById('PopupDivId').style.height='1000px';
document.getElementById('PopupDivId').style.width='1000px';

replacing PopupDivId by the actual Popup's div id, and 1000px by the width and height you want to. Make sure you execute it AFTER it pops up.

I recommend using the Firefox browser, and the Firebug extension, in order to debug and test CSS and Javascript changes.

I hope this helps.

Regards,

Paulo Tavares
Hello

Just wanna share with you a new version of the popupResize espace for Agile Platform 5.1, which fixes an issue with the popup shadow after the popup resize.

Cheers

Miguel Simões João
In 6.0, the RichWidgets have been improved to auto resize the popups automatically when the content of the page changes because of an Ajax refresh or because of a navigation to another page.

Best Regards,
Gustavo Guerra
They also seem to handle mandatory fields better... previously, they'd calculate the width and not take the asterisks into account, so they'd be half off the window.

J.Ja
I'm having a problem with auto resizing of popups.

I'm using a 5.1 created eSpace that was upgraded to 6.0 and I cannot get the "built-in" auto resize of 6.0 in the popups.

Any way to hack it to make it work as intended in 6.0? I noticed some of the CSS changed, not sure it's all due to those changes, but I'm guessing not, since I've done some quick tests and the behaviour was still the same...

Best regards,
PC
Pedro Coelho wrote:
I'm having a problem with auto resizing of popups.

I'm using a 5.1 created eSpace that was upgraded to 6.0 and I cannot get the "built-in" auto resize of 6.0 in the popups.

Any way to hack it to make it work as intended in 6.0? I noticed some of the CSS changed, not sure it's all due to those changes, but I'm guessing not, since I've done some quick tests and the behaviour was still the same...

Best regards,
PC
 
 Hi Pedro

Make sure you have Agile Platform 6.0.1.13 revision patch or later, and refresh the references to the Richwidgets Popup Editor widget. Make sure that the published version of Richwidgets is the one that comes along with the 6.0.1.13 revision patch,

If you're using a custom popup editor, you need to change it youself.

Cheers

Miguel Simões João
Hello Miguel.

I'm using both platform and service studio version 6.0.1.13, same with RichWidgets and I still have the old behaviour
 

Best regards,
PC
Pedro Coelho wrote:
Hello Miguel.

I'm using both platform and service studio version 6.0.1.13, same with RichWidgets and I still have the old behaviour
 

Best regards,
PC
 
Hi Pedro

Can you create a sample espace with the described problem and upload it here so I can analyze the pattern?

Cheers

Miguel Simões João
Hi,

Is there a solution for 7.0?

Thanks
Hi Victor

7.0 also includes the improvements of 6.0.1.13 and above, so that is the solution.

Why? are you having problems with autoresize in 7.0?

Are you using Richwidgets Popup Editor, or a custom Popup Editor?

Cheers

Miguel Simões João
Miguel, thanks for replying.

I'm using the Richwidgets Popup Editor.
I have a Input Text that refresh a TableRecords. If the new Record List has fewer elements than the older the popup does not resize.

I'll attach 2 prints for better understanding.
You can see that the background appears when the list has fewer elements.

On the OnChange action i'm refreshing the TableRecords widget.


Thanks.
I forgot the attachment.


Hi Victor

Sorry for the late reply.

The images you've sent don't provide us with much context. BUt if you're setting a Width or Height on the popup webblock, the AutoResize will not kick in.

Make sure your WidthPx and HeightPx are empty, and that the AutoResize (and eventually th RecenterOnResize) are set to True.

If still in trouble, please share with us the OML file of that espace so we can take a look a the popup definition.

Thanks

Cheers

Miguel Simões João
I created and example.

Click on the link to open the popup, and after the popup shows, click on the "Clear" button.
I need to resize the popup after this action.


Thanks.
Hi Victor

The sample espace was saved by version 5.0.2.27. Aren't you using version 7.0 of the OutSystems Platform?

The autoresize only works with version 6.0.1.13 and above.

Please reupload the sample espace.

Thanks

Cheers

Miguel Simões João
I attached other espace, not the one that i created. Sorry.

Probalbly the one the u posted here in 2011 or other example that i downloaded... 

Now it`s the right one.

Hi Victor

Thanks for the sample. Now I understand the problem. :)

So basically, the AutoResize feature on the richwidgets popup editor is only working as AutoGrowth, and not AutoShrink. So when the content of the popup reduces in size, the popup is not resized.

This is independent of the OutSystems platform version and for now there's isn't any easy workaround. 

I've forwarded this problem to OutSystems R&D, but my experience is that shrink content on popups is actually rare.

So, bottom line, the resize works when the content is growing, but not when the content is shrinking.

Hope this information is helpful.

Cheers

Miguel Simões João

Miguel -

We actually see the need for "auto shrink" on a very regular basis, when we are using a multi-step process (like a wizard or a series of dialogs) in a popup. We learned a while ago to either hard code the size or to live with the "auto grow, but not auto shrink" behavior. :(

J.Ja