RadzenSteps Looking Squished When Do Too Many

Hi There,

I am trying to use the RadzenSteps component to build a process manager page that tracks the steps of various processes. The component looks great when the process has 10 or fewer steps, but the step numbers and titles begin to look squished and/or uneven when there are more steps than that. Is there a way to have the steps go onto another line instead of squishing into one?

Thanks in advance for any guidance you can provide!

Hi @roycroftcr1,

I've tried to replicate this using 50 step items however the step component looked normally in our demo:


Oh cool! Follow-up question: is there a way to make the steps go onto another line instead of needing to scroll through that many steps or have it so a preselected step is centered in the view? My goal is for the user see the step they're on (the step is sometimes preselected using the index and out of sight when opening the screen.)

For example, if the user finished step 34 the last time they logged in, they would automatically be on step 35 when logging in. I was hoping to make it so they wouldn't have to scroll all the way to that step. (I think part of the reason I was seeing the squishing of the steps was because I had disabled scrolling through using css).

Thanks again for any guidance you can provide. Appreciate the active community regarding your components!

Figured it out. For anyone who wants to achieve this effect, this answer regarding tabs works fine:

I discovered that a steplist is actually a tablist, so type it in to your css as is. I actually ended up going with tabs since they look better on multiple lines than the steps do.