15
Views
6
Comments
Popup in reactive resizing after opening
Service Studio Version
11.10.6 (Build 37198)

Hi,

I'm using a Popup where it has a list of chat messages inside. Because there will be varying amounts of messages I'd like the popup height to scale based on how much content there is, up to a max-height of 80vh (which I have set in 'popup-dialog'). However, when I open the popup, it briefly opens at around 400px or so then resizes to whatever it should be.

The popup is opened after the data is loaded. This stops happening if I set the height in the 'popup-dialog' as a fixed height, but I need it to be dynamic.

.popup-dialog {
    border: 0;
    border-radius: var(--border-radius-soft);
    box-shadow: var(--shadow-xl);
    max-height: 80vh;
    max-width: 500px;
    overflow-y: auto;
    padding: var(--space-m);
    width: 100%;
}

There's the CSS.


Does anyone know how I can get around this?

Thanks in advance for any replies!

mvp_badge
MVP
Rank: #72

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

Rank: #37970

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

mvp_badge
MVP
Rank: #72

Hi Aaron,

If that is the case, then I would suggest you try the below-mentioned CSS definition.

CSS Snippet

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


Hope this helps you!


Kind regards,

Benjith Sam

Rank: #937

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

DynamicPopupheight.oml

Rank: #37970

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

Rank: #37970

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