docs(modal): reorganize Styling and add Sizing to Content section - #4689
Merged
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
brandyscarney
commented
Sep 1, 2026
brandyscarney
commented
Sep 1, 2026
brandyscarney
commented
Sep 1, 2026
brandyscarney
commented
Sep 1, 2026
brandyscarney
force-pushed
the
FW-7731
branch
from
September 1, 2026 21:35
aeeb3cf to
8bc0246
Compare
brandyscarney
force-pushed
the
FW-7731
branch
from
September 1, 2026 21:36
8bc0246 to
80cb755
Compare
brandyscarney
commented
Sep 1, 2026
brandyscarney
marked this pull request as ready for review
September 1, 2026 22:11
brandyscarney
changed the title
thetaPC
approved these changes
Sep 2, 2026
thetaPC
left a comment
thetaPC
left a comment
Contributor
There was a problem hiding this comment.
LGTM, thank you! Minor things.
pull Bot
pushed a commit
to LoadsAForks/ionic-framework
that referenced
this pull request
Sep 14, 2026
…onic-team#31413) Issue number: resolves ionic-team#31149 --------- ## What is the current behavior? Setting `--height` to any of the following on an `ion-modal` containing an `ion-content` results in the `ion-content` collapsing to `0` height: `auto`, `fit-content`, `min-content`, or `max-content`. ## What is the new behavior? - Checks if modal `--height` is set to `auto`, `fit-content`, `min-content,` or `max-content` and styles the `ion-content`, `ion-nav` and `.ion-page` appropriately if so - Watches for changes to `--height` on `ion-modal` to dynamically add and remove the class that sizes the `ion-content` to its content - Updates modal `--max-height` to `100%` which allows the content to scroll instead of overflowing and being clipped - Adds a preview test for different scenarios where `ion-modal` has `--height` set - Adds e2e tests for the various `--height` scenarios - Updates `safe-area-utils` to account for the new content-sized modals - Adds spec tests for all new functions ## Does this introduce a breaking change? - [ ] Yes - [x] No ## Other information **Dev build**: `9.0.1-dev.11788212611.154b1596` **Previews**: - [Modal: Content Height](https://ionic-framework-git-fw-7731-ionic1.vercel.app/src/components/modal/test/content-height) - [Modal: Safe Area](https://ionic-framework-git-fw-7731-ionic1.vercel.app/src/components/modal/test/safe-area) **Docs PR**: ionic-team/ionic-docs#4689 --------- Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Sizing to Contentsection detailing how to set--heightto a content size to have the modal resize to its rendered content & added a playground exampleOther information
Previews: