Skip to content

docs(stepper): add step height article #178

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
adrianptrv wants to merge 1 commit into
base: master
Choose a base branch
from
+12 −1
Open

docs(stepper): add step height article #178

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion docs/xplat/src/content/en/components/layouts/stepper.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -424,8 +424,19 @@ The sample below demonstrates all exposed step types and how they could be chang

<Sample src="/layouts/stepper/steptypes" height={300} alt="{Platform} Step Types Example" />

### Dynamic Step Height

<div class="divider--half"></div>
When the `Stepper` is horizontally oriented, the content area height is determined by the step with the most content. All other steps share this fixed height, which may result in visible empty space in steps with less content.

To override the fixed height and have the content area adapt to the active step's content, set the **--body-grid-rows** CSS variable to **0fr** (the default is **1fr**):

```css
igc-stepper {
--body-grid-rows: 0fr;
}
```

<Sample src="/layouts/stepper/step-height" height={490} alt="{Platform} Content Height Example" />

### Stepper Animations

Expand Down
Loading