stepper component - align steps nav items to left - part 2


Topic: stepper component - align steps nav items to left - part 2

Yiannis Kyriazidis asked 3 years ago

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


Michał Duszak staff answered 3 years ago

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


Michał Duszak staff answered 3 years ago

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


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags