Sheet Modal - scrollable content

I have a sheet modal which opens over a map. I want to be able to drag the sheet modal to show more or less of the map (sometimes users need access to features on the map). This works so far.

The problem is a have a list of data in the modal which dynamically changes size. I want to scroll through this list so if the modal is small on screen the scroll bar shows and I can drag down to see all the data, if its large the scrollbar adjusts so it still can be dragged to show all the data, or is not visible if the list is short and is completely shown on the modal.

Currently the div I have with the data in it takes up the whole size of the screen - so the whole div is shown only when the modal fills the screen. Like the height is a fixed number.

Any ideas?

There is an open issue about this - feat: sheet modal, add option to prefer scrolling when not fully expanded · Issue #24631 · ionic-team/ionic-framework · GitHub and a possible workaround in this comment.

1 Like

Thanks for your reply and I went through those posts trying everything I could think of but nothing worked.

I think I’m applying it wrong as I’m not familiar with directives and there isn’t a complete example.

I created that directive and I think I applied it, but no change to the behaviour. I also tried the css suggestions but none of them worked and no complete example to show how to use them.

Get your self familiar with directives: Angular - They are an awesome angular feature that you should know about! :blush:

Anyways, if you say you created & attached it, you can try to debug it (for example by adding a console.log in the directive) to see if it works and is called

Thanks for the help, I ended up doing my own implementation as the standard one was too difficult to get how I wanted it.