I've got a use case where the number of steps in a vertically oriented stepper are dynamic.

If the number of steps is decently high (like, above 10) and the current step is also high, reducing the number of steps to a small value causes a very long and weird looking animation of the progress bar.

Here is a stackblitz demonstrating the issue

Turning off animations or reducing the time would mitigate this problem, but I think the animations are nice to have, especially when progressing through the stepper in a more traditional fashion.

Hi,

I've been trying to override the progress bar style for kendo-stepper. For some reason, i'm getting a scroll bar across the application in the bottom, which follows all the way across the stepper steps. 

From dev tools, i can override this overflow to hidden (Previously it was visible). But when i apply them in my style sheet, it's not getting overridden. Help please.

I need to visible this step outer circle/border when it is the current step not only focusing/clicking on it,  Im using next button to go future steps

Initially instead of first step other steps are disabled. I want to enable them by button click. tried as follows but step still disabled.

public steps = [
    {
      class: "step1",
      label: "API Setup",
      iconClass: "k-icon k-i-file-bac"
      
    },
    {
      class: "step2",
      label: "File Upload",
      isValid: this.isStepValid,
      iconClass: "myicon1",
      disabled : this.disableStep2
    },
    {
      label: "Review",
      isValid: this.isStepValid,
      iconClass: "k-icon k-i-file-txt",
      disabled : this.disableStep3
    },
    {
      label: "Finish",
      isValid: this.isStepValid,
      iconClass: "k-icon k-i-file-txt",
      disabled : this.disableStep4
    },
  ];

Hi,

I'm using kendo UI for angular and want to know how I can customize stepper icons with my own svg icons without adding icon library (eg: font awesome)

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <kendo-stepper
      [steps]="steps"
      stepType="full"
      [(currentStep)]="current"
      [linear]="false"
      [style.width.px]="570"
    >
    </kendo-stepper>
  `,
})
export class AppComponent {
  public current = 1;

  public steps = [
    { label: "Personal Info", icon: "user" },
    { label: "Education", icon: "dictionary-add" },
    { label: "Attachments", icon: "attachment", optional: true },
    { label: "Preview", icon: "preview" },
    { label: "Submit", icon: "file-add" },
  ];
}

I'm trying to adapt the kendo-stepper (with vertical position) so that I can display it as a type of collapsable between each step.
Something like this: 
https://material.angular.io/components/stepper/overview
 
but I can't do it, in the image I attached a couple of examples

 

Hello,

i add an input inside kendo stepper using the 'kendoStepperStepTemplate' option, it works fine but in FireFox , you cannot select the input 
exemple :

   <kendo-stepper
            [steps]="steps"
            [stepType]="'label'"
            [currentStep]="2"
            [linear]="false"
            [style.width.px]="750"
        >
            <ng-template kendoStepperStepTemplate let-step let-index="index">
                <div class='oval-step'>
                    <span class="{{step.icon}}"></span>
                </div>
                <div class='step-label'>{{step.label}}
                 <ng-container *ngIf="index === 1">
                  <input type=text value='testtt' >
                </ng-container>
                </div>
            </ng-template>
        </kendo-stepper>

Hello, I am trying to implement stepper with child steps. For example Sports is my main step and football, cricket are my sub steps. 

I can only see steppers without child steps in the website. Kindly help me on this