Topic: stepper component - align steps nav items to left

Yiannis Kyriazidis free asked 2 years ago

Currently the stepper components steps strech the entire contianer width, as show in example

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

Michał Duszak staff answered 2 years ago

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:

Yiannis Kyriazidis free answered 2 years ago

exactly what i was hoping. thanks

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

  • 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