Step doesn't use full width of parent container
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Current behavior 😯
When building a Stepper, each step's content is contained within a limited column, taking up a fraction of the available screen real estate.
Expected behavior 🤔
Each step's content should use the full width parent container.
Steps to reproduce 🕹
Steps:
- Create a Stepper with more than one step
- Notice that the content of each step takes up only 1 / n of the container's width.
Context 🔦
When building a complex Stepper with complex content such as a form it is necessary for the usability that each step be able to take up the full width of the containing window.
Your environment 🌎
`npx @mui/envinfo`
System:
OS: Windows 10 10.0.22000
Binaries:
Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Version 95.0.4638.69 (Official Build) (64-bit)
Edge: Spartan (44.22000.120.0), Chromium (95.0.1020.44)
npmPackages:
@mui/core: 5.0.0-alpha.53
@mui/icons-material: 5.0.5 => 5.0.5
@mui/lab: 5.0.0-alpha.53 => 5.0.0-alpha.53
@mui/material: 5.0.6 => 5.0.6
@mui/private-theming: 5.0.1
@mui/styled-engine: 5.0.2
@mui/styled-engine-sc: 5.0.4 => 5.0.4
@mui/styles: 5.0.2 => 5.0.2
@mui/system: 5.0.6 => 5.0.6
@mui/types: 7.0.0
@mui/utils: 5.0.1
@mui/x-data-grid: 5.0.0-beta.1 => 5.0.0-beta.1
@types/react: 17.0.33 => 17.0.33
react: 17.0.2 => 17.0.2
react-dom: 17.0.2 => 17.0.2
styled-components: 5.3.3 => 5.3.3
typescript: 4.4.4 => 4.4.4
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the issue with a Stepper containing more than one step and inspect the Stepper component entry point and its content layout. Confirm the current one-column-per-step sizing, then verify that complex step content can use the full parent width without breaking the multi-step layout.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100