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)
following is the kendo sample I'm usingimport { 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