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

Yiannis Kyriazidis free asked 2 years ago

this is a continuation of the following initial issue

While the snippet provided works there is a problem when used in a container like the below example : How can we make it so the stepper is constrained within its parent container and doesnt overflow

Michał Duszak staff answered 2 years ago

Try adding overflow: hidden to the parent (here it will be the column-2 div) Here is the snippet:

Michał Duszak staff answered 2 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?

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: 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