Modal scroll with hug contents

App Building
1

Hello All,

I have a Modal component with List View inside and buttons in the bottom. Modal ->Layout -> Height is set to 'hug contents'. When I provide large number of elements to List View then modal heigth gets too big and the bottom gets way down the screen - there is no possibility to scroll down to the buttons. How can I use 'hug contents' option and add scroll bar in case some predefined height is reached?

Regards

2

@heynoway
Welcome to the forum!
I don't believe this is possible currently. I believe it is a feature request.
My suggestion is to use scroll and set the height.

3

Hey folks! Not finding an existing feature request specifically for setting max height on a modal (though I could be missing something). At any rate, it is now filed as one :slightly_smiling_face:

4

Hello,
I am having the same issue, on Chrome I have no problem scrolling to the bottom of the modal, but on edge when I open the modal can not reach the bottom of my modal. I don't know when it start doing this because before I didn't have this problem.

Chrome:

image
image1885×906 64 KB

Edge:

image
image1716×929 105 KB

5

Thanks @Kabirdas !

Can we expect an update in this thread when new feature is implemented?

6

Hey @Gabicus!

It looks like this is a known issue that with Chrome v108 the dev team is looking at pushing a fix for. It should be in the next Cloud release (2.106.2). In the meantime, can you try changing the pointer-events CSS property for the modal wrapper? The following custom CSS should do the trick:

.retool-modal-component-wrapper{ 
  pointer-events: initial; 
}

Let me know if that works as an intermediate solution!

And yes @heynoway, it looks as though the request for a maximum height on modals isn't being prioritized right now, so for the moment, you'll need to continue to use a fixed height modal. But it is on the dev team's radar and when the feature is included we'll report back here!

If it helps, it is possible to set the "fixed" height dynamically:

It's a bit hacky since you'd need to approximate the hug contents behavior as a function of the components you have in your modal. In the example, I used 300px as a minimum height and then approximated the height that each listview items adds as being 80px, then, Math.min let me set a maximum height of 800px. You don't necessarily need to use listView.instances but you may need to get creative with how you design the function that emulates "hug contents".

7

Thanks @Kabirdas !

For my case css update will do the trick. Significant number of items in the list view is unlikely in production environment.