Making the Wizard Stepper Stick to the Top of the Page
Environment
| Property | Value |
|---|---|
| Product | Wizard for ASP.NET Core |
| Version | 2023.3.1114 |
Description
I want to make the stepper in the Wizard for ASP.NET Core component stick to the top of the page when scrolling, as some forms can be quite long.
Solution
To achieve this, follow these steps:
- Add an empty
<span>element with a unique ID above the Wizard component:
<span id="customWrapper"></span>
- In the JavaScript code, detach the stepper element and append it to the empty
<span>element:
$(document).ready(function () {
var stepper = $('.k-stepper').detach();
$("#customWrapper").append(stepper);
$('.k-stepper').data("kendoStepper").setOptions({});
});
- Apply CSS to make the custom
<span>element sticky and visible at the top:
#customWrapper {
position: sticky;
top: 0;
z-index: 100;
}
- (Optional) If you want to add a background color to the stepper, use the
.k-stepperCSS class selector:
.k-stepper {
background-color: green;
}