Topic: Horizontal-fix for stepper not working

Brandon Matthews free asked 3 years ago


Expected behavior Whole form should be visible on the webpage. Actual behavior I have a long form that I want to put in the horizontal stepper. I added the horizontal fix to css, js, and html class. the form is still getting cut off. Im not sure how to fix this. Resources (screenshots, code snippets etc.)

{{!-- Stepper --}}
<ul class="stepper horizontal horizontal-fix" id="horizontal-stepper-fix">
    <li class="step active">
        <div class="step-title waves-effect waves-dark">Step 1</div>
        <div class="step-new-content">
            <div class="form-row">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input type="text" id="materialRegisterFormName" class="form-control">
                        <label for="materialRegisterFormName">Participant's Name</label>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input type="text" id="materialRegisterFormPrimaryContactName" class="form-control">
                        <label for="materialRegisterFormPrimaryContactName">Primary Contact's Name</label>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input type="text" id="materialRegisterFormGuardian1" class="form-control">
                        <label for="materialRegisterFormGuardian1">Parent or Guardian 1</label>
                    </div>
                </div>
            </div>

            <div class="form-row">
                <div class="col">
                    <!-- First name -->
                    <div class="md-form">
                        <input type="text" id="materialRegisterFormGuardian2" class="form-control">
                        <label for="materialRegisterFormGuardian2">Parent or Guardian 2</label>
                    </div>
                </div>
            </div>

            <!-- Address -->
            <div class="md-form mt-0">
                <input type="text" id="materialRegisterFormAddress" class="form-control">
                <label for="materialRegisterFormAddress">Address</label>
            </div>

            <!-- Phone number -->
            <div class="md-form">
                <input type="text" id="materialRegisterFormPhone" class="form-control"
                    aria-describedby="materialRegisterFormPhoneHelpBlock">
                <label for="materialRegisterFormPhone">Phone number</label>
            </div>

            <h6>Participant or Guardian's Email</h6>
            <!-- E-mail -->
            <div class="md-form mt-0">
                <input type="email" id="materialRegisterFormEmail" class="form-control">
                <label for="materialRegisterFormEmail">E-mail</label>
            </div>

            <h6>Participant's Birthdate</h6>
            <div class="md-form">
                <input placeholder="Click in the text area to select a date" type="text" id="date-picker-example"
                    class="form-control datepicker">
                <label for="date-picker-example"></label>
            </div>

            <!-- Age -->
            <div class="md-form mt-0">
                <input type="text" id="materialRegisterFormAge" class="form-control">
                <label for="materialRegisterFormAge">Age</label>
            </div>

            <h6 class="font-weight-bold">Participant's Photo</h6>
            <div class="file-upload-wrapper mb-4">
                <input type="file" id="input-file-photo" class="file-upload" />
            </div>


        </div>
    </li>
    <li class="step">
        <div class="step-title waves-effect waves-dark">Step 2</div>
        <div class="step-new-content">
            <div class="row">
                <div class="md-form col-12 ml-auto">
                    <input id="password-horizontal" type="password" class="validate form-control" required>
                    <label for="password-horizontal">Your password</label>
                </div>
            </div>
            <div class="step-actions">
                <button class="waves-effect waves-dark btn btn-sm btn-primary next-step"
                    data-feedback="someFunction21">CONTINUE</button>
                <button class="waves-effect waves-dark btn btn-sm btn-secondary previous-step">BACK</button>
            </div>
        </div>
    </li>
    <li class="step">
        <div class="step-title waves-effect waves-dark">Step 3</div>
        <div class="step-new-content">
            Finish!
            <div class="step-actions">
                <button class="waves-effect waves-dark btn-sm btn btn-primary m-0 mt-4"
                    type="button">SUBMIT</button>
            </div>
        </div>
    </li>
</ul>

css, ul.horizontal-fix li a { padding: .84rem 2.14rem; }

js, function someFunction22() { setTimeout(function () { $('#horizontal-stepper-fix').nextStep(); }, 2000); }


MDBootstrap staff commented 3 years ago

Hi Brandon, Did you try to wrapp it inside bootstrap grid? Many of our components require proper bootstrap structure above to work properly especially with advanced usage. Did you initialize stepper from addons-pro properly like described on this site? https://mdbootstrap.com/docs/jquery/components/stepper/#how-it-works Did you initialize your stepper with $(document).ready(function () { $('.stepper').mdbStepper(); })? I need to eliminate these issues before debugging. I am here to help you. Regards, Piotr


Brandon Matthews free commented 3 years ago

Hi Piotr, I did wrap it inside of a bootstrap grid. I followed the instruction from addons-pro exactly. It is initialiazed with

$(document).ready(function () { $('.stepper').mdbStepper(); })

Not sure what else to do...


MDBootstrap staff commented 3 years ago

You didn't mention it. I have to ask, did you add this code in head and this code under mdb scripts

?



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Opened

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.10
  • Device: Laptop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No