Stepper displaying title underneath

  1. MDB Home Page
  2. Support Main Page
  3. MDB Vue
Topic: Stepper displaying title underneath

wuohyeah asked a year ago

Expected behavior

Due to my form consisting of 8 steps, current layout of stepper is too long for me. How can I set stepper text displayed underneath the number like the attached image?

enter image description here

Actual behavior

enter image description here

Resources (screenshots, code snippets etc.)

enter image description here

Bartosz Cylwik staff answered a year ago

We do not have an option that would change the position of those elements. You can try to edit the css yourself and see whether that works.

For example:

  • Try changing the flex-direction to column for the stepper-head element
  • 0 !important to the margin-right property of the stepper-head-icon element

The only problematic things here are the :after and :before elements (lines). You would have to play around with their styling.

Write
Create snippet
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 Vue
  • MDB Version: MDB5 5.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No
Tags
mdbvue
Related topics
1
Add Ability to programmatically Blur MDBAutocomplete
1
Please update docs for sidenavs
1
MDBTextarea not updating when isValid and isValidated props change
1
Axios needs to be updated
0
Webpack extract problem
About author
wuohyeah
0Support score
11Questions 0Answers
0Snippets likes 6Snippets