Topic: stepper component - align steps nav items to left

Yiannis Kyriazidis free asked 9 months ago


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


Michał Duszak staff answered 9 months 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: https://mdbootstrap.com/snippets/standard/m-duszak/3661729#css-tab-view


Yiannis Kyriazidis free answered 9 months ago


exactly what i was hoping. thanks



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.10.2
  • Device: windows desktop
  • Browser: chrome
  • OS: windows
  • Provided sample code: No
  • Provided link: Yes