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

wuohyeah priority asked 5 months 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 5 months 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
  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 5.0.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Linux
  • Provided sample code: No
  • Provided link: No
Tags
mdbvue
About author
wuohyeah
0Support score
11Questions 0Answers 6Snippets