Stepper displaying title underneath

Topic: Stepper displaying title underneath

wuohyeah priority asked 6 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

Add comment

Bartosz Cylwik staff answered 6 months ago

0 0 Best answer

Please insert min. 20 characters.

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.

Add comment

Write

Create snippet

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

wuohyeah

0Support score
11Questions 0Answers 6Snippets