Kinark
Issues with horizontal stepper
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
- It is showing 2 in the first step
- I am not able to click on any step now
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
Hi, I have the same problem, this is my codes.
`html*>
<link rel="stylesheet" href="./css/mstepper.min.css">
<ul class="stepper horizontal demos" id="horizontal" >
<li class="step">
<input id="horizontal_email" name="horizontal_email" type="email" class="validate" required>
<label for="horizontal_email">Your e-mail
<button class="btn blue next-step">CONTINUE
<li class="step">
<input id="horizontal_password" name="horizontal_password" type="password" class="validate" required>
<label for="horizontal_password">Your password
<button class="btn blue next-step" data-feedback="someFunction">CONTINUE
<button class="btn-flat previous-step">BACK
<li class="step">
Finish!
<button class="btn blue" type="submit">SUBMIT
`And the effect I'm showing is:
Can you show me your codes? Thinks
it worked for me
ul.stepper.horizontal .step .step-title {
position: relative;
}
