Issues with horizontal stepper

[ermarkar]

HTML Code

<ul class="stepper horizontal" #contentTypeStepper style="min-height:458px">
    <li class="step active">
        <div class="step-title">Step 1</div>
        <div class="step-content">
            <p>
                Step 1 Data
            </p>
            <!-- Your step content goes here (like inputs or so) -->
            <div class="step-actions">
                <!-- Here goes your actions buttons -->
                <button class="waves-effect waves-dark btn next-step">CONTINUE</button>
            </div>
        </div>
    </li>
    <li class="step">
        <div class="step-title">Step 2</div>
        <div class="step-content">
            <p>
                Step 2 Data
            </p>
            <!-- Your step content goes here (like inputs or so) -->
            <div class="step-actions">
                <!-- Here goes your actions buttons -->
                <button class="waves-effect waves-dark btn previous-step">CONTINUE</button>
            </div>
        </div>
    </li>
</ul>

and in ts file

this.iContentTypeStepper = new MStepper(this.contentTypeStepper.nativeElement, {
            firstActive: 0 // this is the default
});

but this is not working properly.

And on click of Step1 it changes to

Issues

1. It is showing 2 in the first step
2. I am not able to click on any step now

[Kinark]

Could you please provide a jsfiddle or something? I couldn't reproduce the bug and it's working well on the docs: https://kinark.github.io/Materialize-stepper/#demos_horizontal

[ermarkar]

Hi, try removing waves-effect waves-dark classes from buttons.

[MQS520]

Hi, I have the same problem, this is my codes.

`

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

​ <title>Document</title>

​ <link rel="stylesheet" href="./css/mstepper.min.css">

​ <ul class="stepper horizontal demos" id="horizontal" >

​ <li class="step">

                   <div data-step-label="To step-title!" class="step-title waves-effect waves-dark">Step 1

                   <div class="step-content">

                      <div class="row">

                         <div class="input-field col s12">

​ <input id="horizontal_email" name="horizontal_email" type="email" class="validate" required>

​ <label for="horizontal_email">Your e-mail

​

​

                      <div class="step-actions">

​ <button class="btn blue next-step">CONTINUE

​

​

​

​ <li class="step">

                   <div class="step-title waves-effect waves-dark">Step 2

                   <div class="step-content">

                      <div class="row">

                         <div class="input-field col s12">

​ <input id="horizontal_password" name="horizontal_password" type="password" class="validate" required>

​ <label for="horizontal_password">Your password

​

​

                      <div class="step-actions">

​ <button class="btn blue next-step" data-feedback="someFunction">CONTINUE

​ <button class="btn-flat previous-step">BACK

​

​

​

​ <li class="step">

                   <div class="step-title waves-effect waves-dark">Step 3

                   <div class="step-content">

​ Finish!

                      <div class="step-actions">

​ <button class="btn blue" type="submit">SUBMIT

​

​

​

​

<script src="./js/mstepper.min.js" />

`

And the effect I'm showing is:


Can you show me your codes? Thinks

[josephwaiguru]

It works after adding materialize.css

[mustafabeyazbulut]

it worked for me

ul.stepper.horizontal .step .step-title {
    position: relative;
}