Topic: stepper component - align steps nav items to left
Currently the stepper components steps strech the entire contianer width, as show in example
https://mdbootstrap.com/snippets/standard/yiannis_kyriazidis/3657869
The wizard steps should be aligned by default to the left and sized based on its steps content. How can we make the steps panels align to the left and not streched ? Only the The step contents should fill the container
You can set width of the stepper component to the fixed width the smaller content's width.
.stepper {
width: 100%;
max-width: 600px;
}
If you want stepper head to be the minimum size but content to fill all the space, then set stepper to the fixed with of the head section, set its head to visible, and the content's position to absolute like so:
.stepper {
width: 360px;
overflow: visible;
}
.stepper-content {
position: absolute;
width: 100vw !important;
}
Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3661729#css-tab-view
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: windows desktop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: Yes