This article is an example of making the Kendo Wizard Component responsive. The framework used is the Kendo UI for jQuery. In this example, our requirement is to make the Kendo Wizard respond to the width of the browser. If the width is greater than 768, the Kendo Stepper is position on the left, otherwise it is on top.
This article is based on an answer I made in Stack Overflow - how to make Kendo Wizard responsive. I tried a couple of things. First, manipulating the Kendo Wizard CSS nearly works but the not quite. Tried setOptions but it had no effect. So I ended up destroying and recreating the Kendo Wizard widget on window resize.
Here is our solution. You can edit the code below using any text editor but I prefer Visual Studio Code. Make sure you are connected to the Internet because the code pulls the Kendo library from the Telerik CDN. Take note that this is just a demonstration code and you'll need to purchase a license if you are going to use Kendo UI for jQuery for more than just evaluation purposes.
Here is how it looks like with width greater then 768:
Kendo Wizard - Stepper on the Left Side
With less than 768:
Kendo Wizard - Stepper at the Top
There you have it. A quick and simple example of how to make the Kendo Wizard responsive.
