line over steps

[Mario]

Good morning, I have the problem you see in the two images above, Is there anyone with the same problem who maybe solved it?
The problem appeared after updating from version 2022.2.802 to version 2023.2.829.
The two steppers are configured as follows:

@(Html.Kendo().Stepper()
    .Name("stepper")

        .Linear(false)
    .Orientation(StepperOrientationType.Horizontal)
    .Steps(s =>
    {
        for (int i = 0; i < (Model.ClaimStatusFlows.Count()); i++) {

            if (Model.Claim.ZQwaFlowStatus == Model.ClaimStatusFlows[i].IdQda)
            { selected = true;
                enabled = true;
            }
            else { selected = false; enabled = false;
            }
            s.Add().Label(Model.ClaimStatusFlows[i].Code).Selected(selected).Enabled(enabled);
        }

    }))


@(Html.Kendo().Stepper()
                                .Name("act_status")
                                .Indicator(false)
                                .Orientation(StepperOrientationType.Horizontal)
                                .Steps(s =>
                                {
                                    for (int i = 0; i < Model.ListActionStatus.Count(); i++)
                                    {
                                        if (Model.actions_status == Model.ListActionStatus[i].StatusValue)
                                        {
                                            s.Add().Label(Localizer[Model.ListActionStatus[i].StatusName].Value.ToString()).Selected(true).Enabled(true);
                                        }
                                        else
                                        {
                                            s.Add().Label(Localizer[Model.ListActionStatus[i].StatusName].Value.ToString()).Enabled(false);
                                        }
                                    }
                                })
                        )

and as additional css there are these two things:

    .k-step-text {
        max-width: 150% !important;
    }

    .k-step-label {
        max-width: 150% !important;
    }

I also tried to force the z-index of the k-step-indicators, but to no avail as it remains exactly the same.

[Mihaela]

Hello Mario,

Since you have submitted the same query as a support ticket, and I have already answered you in the support thread, I will post the same answer here in case someone else has the same question:

Would you try adding the following CSS style, and let me know how the appearance changes at your end?

.k-stepper .k-progressbar {
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

If the issue persists, please check if there are any additional CSS styles related to the Stepper.

Also, feel free to modify the attached sample application based on your code to replicate the issue and send it back to me for review. I will test it locally and follow up with a better suggestion.

 

Regards,
Mihaela
Progress Telerik