Stepper not working


Topic: Stepper not working

AntoSky_ pro premium priority asked 3 years ago

Expected behavior I integrated all the BOOTSTRAP CSS and JS library from the ZIP and I can't get the steppers to work, I have no error Actual behavior No action when clicking on a stepper, and the elements present in a step of a stepper are all displayed Resources (screenshots, code snippets etc.) enter image description here


Grzegorz Bujański staff answered 3 years ago

Unfortunately, I am unable to recreate this issue. Can you send the entire code, including the stepper? We need information on how to reproduce this.


AntoSky_ pro premium priority answered 3 years ago

Hello,

This is the entire code :

h5 { color: black; } .stepper-active .stepper-head-icon { background-color: #C8A049; }

<div class="card" style="width: 70%; height: 70%;">
  <div class="card-body">
    <ul style="height: 100%;" class="stepper" data-mdb-stepper="stepper" data-mdb-stepper-linear="true" data-mdb-stepper-mobile-breakpoint="700">
      <form class="needs-validation stepper-form" novalidate>
        <li class="stepper-step stepper-active">
          <div class="stepper-head">
            <span class="stepper-head-icon">
              <i class="fa-solid fa-circle-user"></i>
            </span>
            <span class="stepper-head-text">Votre métier</span>
          </div>
          <div class="stepper-content py-3">
            <div class="form-outline">
              <h1>dedede</h1>
            </div>
          </div>
        </li>
        <li class="stepper-step">
          <div class="stepper-head">
            <span class="stepper-head-icon">
              <i class="fa-brands fa-buffer"></i>
            </span>
            <span class="stepper-head-text">Votre offre</span>
          </div>
          <div class="stepper-content py-3">
            <div class="form-outline">
              <input type="text" id="linear-stepper-input-2" class="form-control" required />
              <label class="form-label" for="linear-stepper-input-2">step 2</label>
              <div class="invalid-feedback">invalid</div>
            </div>
          </div>
        </li>
        <li class="stepper-step">
          <div class="stepper-head">
            <span class="stepper-head-icon">
              <i class="fa-solid fa-circle-info"></i>
            </span>
            <span class="stepper-head-text">Vos informations</span>
          </div>
          <div class="stepper-content py-3">
            <div class="form-outline">
              <input type="text" id="linear-stepper-input-3" class="form-control" required />
              <label class="form-label" for="linear-stepper-input-3">step 3</label>
              <div class="invalid-feedback">invalid</div>
            </div>
            <button class="btn btn-primary" type="submit">Submit</button>
          </div>
        </li>
      </form>
  </ul>
  </div>
</div>


AntoSky_ pro premium priority answered 3 years ago

No idea for fix the problem ? I specify that the project works under Vue3


Grzegorz Bujański staff answered 3 years ago

Unfortunately, the MDB standard was not created with frameworks in mind and may not actually work properly. We have created a special MDB version for Vue: https://mdbootstrap.com/docs/b5/vue/pro/


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: Pro
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 3.11.0
  • Device: COMPUTER
  • Browser: CHROME
  • OS: MACOS
  • Provided sample code: No
  • Provided link: No