playground for auto sized sheets

[DavidStrausz]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Sheet modals that are sized according to their content. If the content exceeds the max-height, I would expect it to be scrollable. If the height of the content changes, the sheet modal should also change its height accordingly. Changing breakpoints is not possible, swiping down dismisses the sheet. It would also be nice if the height of the keyboard could be accounted for, if it is open (or just expand to max-height).

Describe the Use Case

We find ourselves more and more in situations where an auto-height sheet modal would come in very handy. For example we recently added a new payment flow in our app which makes use of different sheets for e.g. showing payment status, entering payment details, and in a lot of these cases we just wanted the sheet modal to be the size of its content. This is currently hard to do when considering different screen sizes on different devices.

A	B

A lot of native sheets behave that way too:

Twitter A	Twitter B	Twitter C

Apple Maps A	Apple Maps B

Describe Preferred Solution

Setting initialBreakpoint to auto could be an possible option to control the feature. Setting the breakpoints array would not have any effect if initialBreakpoint is set to auto.

Describe Alternatives

We tried to do it with custom css but it broke the sheets enter animation. Also, it would just be nice if it would be supported out of the box :)

ion-modal.auto-height {
  --height: auto;
  --max-height: 90vh;

  div.content-wrapper {
    overflow-y: scroll;
  }
}

Related Code

No response

Additional Information

No response

[liamdebeasi]

Thanks for the report. The requested behavior should already be available in Ionic Framework. In this case, you will want to use --height: fit-content and avoid the use of ion-content. The reason is ion-content is sized relative to the content around it, so having an automatic height will cause the ion-content to have a height of 0px.

Here is a demo: https://codepen.io/liamdebeasi/pen/WNgogJp

This feature is referred to as Custom Dialogs and is useful when you want a modal that is not full page. Can you give this a try and let me know if it works?

[DavidStrausz]

@liamdebeasi Thank you for your response :)
Setting --height to fit-content works perfectly in Chromium based browsers, but in Webkit browsers this makes the sheet disappear entirely (happens in your demo too).

[liamdebeasi]

Whoops! You can probably stick with auto actually. That seems to work fine in Chrome and Safari.

[DavidStrausz]

@liamdebeasi Thanks! Setting it to auto works :) When I last tried that, I somehow managed to mess up the enter animation of the sheet, but can't reproduce it anymore.

I think a short "receipe" for auto height sheets in the docs would be useful for others, who try to do the same.

[liamdebeasi]

We already have a recipe for this: https://ionicframework.com/docs/api/modal#custom-dialogs

This particular demo is using fit-content, but the same concepts apply.

edit: Misread that, yes we should have a recipe specifically for sheets.

[liamdebeasi]

Going to move this to the docs repo so we can track the documentation updates.

[thetaPC]

Thanks for the issue! The playground was added via #2905 and will be available soon at the modal page.