Hi Aaron,

For the mentioned use-case, I would suggest you define the min-height:80vh; instead of restricting the max-height to certain value as you are expecting the popup height should get adjusted dynamically on the basis of its content, which is the default behaviour of the popup widget.

Also make sure that instead of overriding the default class definition i.e. popup-dialog, chain the pre-defined class with the custom CSS class as mentioned below.

• Add a custom class in the Popup widget Style Classes property as shown below

CSS Snippet

.custom-popup-style.popup-dialog {    
    min-height: 80vh;
    overflow-y: auto;
}

Hope this helps you!

Kind regards,

Benjith Sam

Hi Benjith,

Thanks for the quick response!

I've implemented the custom-popup-dailog as a seperate class rather than amending the popup-dialog.

Issue is, I need the popup to be potentially be as little as 20vh or so if there are no messages like so:

As well as having the popup be a maximum of 80vh. So dynamically being between 20-80 based on how many messages (if any) there are.

If I Add min-height to 80vh there is a lot of unnecessary space:

Thanks,

Aaron

Hello Aaron Gordon

I have tried to change the popup height using javascript. 

Please refer to the screen name as Screen1 under DynamicPopup Ui flow.

You can customize as per your need. 

Hope you find it helpful

Regards

Divya Nayak

Hi,

Thanks again for your prompt responses!

The problem is...the popup will size to the correct size (with a maximum and minimum set correctly)

However it opens the resizes. First it will show like this:

Then less than half a second later it resizes to what it should be (80vh in this case)

This doesn't happen if we do set a specific height (using a variable or otherwise), but the problem is we don't know how high we will need the popup to be (multiple different chats have different amounts/lengths of messages) prior to opening it. So we could do something where we set the height as 200px+(amount of messages*80)px but then the messages can be varying lengths so this wouldn't work in all cases either.

Thanks,

Aaron

Finally figured it out!

It was an interaction between the List widget and the Popup that was causing it. I added

'disable-virtualization=true'

into the Attributes of the List Widget and it stopped this behaviour!

Thanks again to all who responded,

Aaron