Topic: stepper component - align steps nav items to left - part 2
this is a continuation of the following initial issue https://mdbootstrap.com/support/standard/stepper-component-align-steps-nav-items-to-left/
While the snippet provided works there is a problem when used in a container like the below example :
https://mdbootstrap.com/snippets/standard/yiannis_kyriazidis/3778708 How can we make it so the stepper is constrained within its parent container and doesnt overflow
Try adding overflow: hidden to the parent (here it will be the column-2 div)
Here is the snippet: https://mdbootstrap.com/snippets/standard/m-duszak/3785038
PS I can see that the text will be still overflowing the window on the right - there is need for an adjustment
.stepper-content {
position: absolute;
width: 50vw !important;
}
Take note that this is just an workaround. Smaller viewports may not be able to fit the whole stepper and it's not likely that it will be repsonsive and move steps to the next row. If you wish to fit stepper on a one-half of a screen, maybe you'd like to use it's vertical version?
https://mdbootstrap.com/docs/standard/components/stepper/#section-vertical-stepper-example
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.11.0
- Device: windows desktop
- Browser: chrome
- OS: windows
- Provided sample code: No
- Provided link: Yes