docs(modal): reorganize Styling and add Sizing to Content section by brandyscarney · Pull Request #4689 · ionic-team/ionic-docs

brandyscarney · 2026-09-01T20:31:06Z

⚠️ Remove all dev builds before merging ⚠️

Description

Reorganized the Modal API Styling section to have a top-level Theming heading and subsections
Added a Sizing to Content section detailing how to set --height to a content size to have the modal resize to its rendered content & added a playground example
Sibling PR to fix(modal): prevent ion-content collapsing at content-based heights ionic-framework#31413

Other information

Previews:

Before
After

vercel · 2026-09-01T20:31:12Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-docs	Ready	Preview	Sep 2, 2026 7:08pm UTC

brandyscarney · 2026-09-01T20:34:53Z

-:::note
+### Styling

-If you are building an Ionic Angular app, the styles need to be added to a global stylesheet file. Read [Style Placement](#style-placement) in the Angular section below for more information.


The Style Placement section has been removed since v6 so I deleted this entire note: 997fe9e

brandyscarney · 2026-09-01T20:35:26Z

 <SheetScrollingContentExample />

-## Styling
+## Theming


Reorganizing the sections into Theming -> Styling to match other components, see: https://ionicframework.com/docs/api/action-sheet#theming

I considered updating the playground directory structure but moving any would break the JP docs.

brandyscarney · 2026-09-01T20:35:50Z

-<ThemeExample />
-
-### Animations
+## Animations


I promoted Animations out of Theming because it doesn't actually change any styles.

brandyscarney · 2026-09-01T20:36:12Z

Updated older documentation so any future deployments would be accurate.

Do you expect any of the archived versions to be unfrozen? I can understand v7 but v6 seems very unlikely.

We had to unfreeze and fix the v6 deployment just last year so while I don't want to have to unfreeze it, I'd rather it have the correct documentation if we ever re-deploy it.

brandyscarney · 2026-09-01T22:03:26Z

+[Controller modals](#controller-modals) are appended to the root of your application, outside of the component that presented them. Component-scoped styles will not reach these modals, so their styles must be applied globally, from a stylesheet that is not scoped to a component.

-:::note
+[Inline modals](#inline-modals-recommended) stay where they are declared in your template, so component-scoped styles do apply to them.


I can revert this if desired - but I don't know why inline modals were specified here as needing to be overridden globally. We can target ion-modal directly from the example component.

thetaPC

LGTM, thank you! Minor things.

thetaPC · 2026-09-02T17:59:45Z

+
+:::warning
+
+The height must be set on the modal through the `--height` CSS variable. Setting `height` on the `content` [CSS Shadow Part](#css-shadow-parts) will still resize the modal, but any [Content](./content) inside of it will collapse to a height of `0`, leaving only the header visible.


Suggested change

The height must be set on the modal through the `--height` CSS variable. Setting `height` on the `content` [CSS Shadow Part](#css-shadow-parts) will still resize the modal, but any [Content](./content) inside of it will collapse to a height of `0`, leaving only the header visible.

The height must be set on the modal through the `--height` CSS variable. Setting `height` on the `content` [CSS Shadow Part](#css-shadow-parts) will still resize the modal, but any [Content](./content.mdx) inside of it will collapse to a height of `0`, leaving only the header visible.

thetaPC · 2026-09-02T18:00:47Z

+The height must be set on the modal through the `--height` CSS variable. Setting `height` on the `content` [CSS Shadow Part](#css-shadow-parts) will still resize the modal, but any [Content](./content) inside of it will collapse to a height of `0`, leaving only the header visible.
+
+```css
+/* Do not do this */


Suggestion to uppercase the comment since it's important or maybe move it outside and bold it. The same goes for the other comment.

thetaPC · 2026-09-02T18:04:00Z

Do you expect any of the archived versions to be unfrozen? I can understand v7 but v6 seems very unlikely.

docs(modal): reorganize styling section to match others

f73878a

vercel Bot deployed to Preview September 1, 2026 20:31 View deployment

brandyscarney commented Sep 1, 2026

View reviewed changes

brandyscarney mentioned this pull request Sep 1, 2026

fix(modal): prevent ion-content collapsing at content-based heights ionic-team/ionic-framework#31413

Open

2 tasks

vercel Bot deployed to Preview September 1, 2026 20:54 View deployment

brandyscarney force-pushed the FW-7731 branch from aeeb3cf to 8bc0246 Compare September 1, 2026 21:35

chore(deps): use dev version

80cb755

brandyscarney force-pushed the FW-7731 branch from 8bc0246 to 80cb755 Compare September 1, 2026 21:36

vercel Bot deployed to Preview September 1, 2026 21:37 View deployment

brandyscarney added 2 commits September 1, 2026 18:01

docs(modal): add Sizing to Content section and demo

29fb8b8

docs(modal): specify inline modals can be overridden per component

9856417

brandyscarney commented Sep 1, 2026

View reviewed changes

vercel Bot deployed to Preview September 1, 2026 22:03 View deployment

brandyscarney marked this pull request as ready for review September 1, 2026 22:11

brandyscarney requested a review from a team as a code owner September 1, 2026 22:11

brandyscarney requested a review from thetaPC September 1, 2026 22:11

brandyscarney changed the title ~~docs(modal): reorganize styling section and add Sizing to Content section~~ docs(modal): reorganize Styling and add Sizing to Content section Sep 1, 2026

thetaPC approved these changes Sep 2, 2026

View reviewed changes

brandyscarney added 2 commits September 2, 2026 15:04

Merge branch 'main' into FW-7731

db5de70

docs(modal): update content links and comment

8af8824

brandyscarney requested a review from thetaPC September 2, 2026 19:07

vercel Bot deployed to Preview September 2, 2026 19:08 View deployment


		:::warning

		The height must be set on the modal through the `--height` CSS variable. Setting `height` on the `content` [CSS Shadow Part](#css-shadow-parts) will still resize the modal, but any [Content](./content) inside of it will collapse to a height of `0`, leaving only the header visible.

Uh oh!

Conversation

brandyscarney commented Sep 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Other information

Uh oh!

vercel Bot commented Sep 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

brandyscarney Sep 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

brandyscarney commented Sep 1, 2026 •

edited

Loading

vercel Bot commented Sep 1, 2026 •

edited

Loading

brandyscarney Sep 1, 2026 •

edited

Loading