Reposition step labels on TelerikWizard

1 Answer 32 Views
Wizard
Edo
Top achievements
Rank 1
Edo asked on 14 Sep 2023, 12:10 PM | edited on 15 Sep 2023, 11:55 AM

Hello,

We are using a TelerikWizard with WizardStepperSettings Linear="false" and would like to move the labels inline with the step indicators. See this example picture:

 

Is dat possible?

Regards,

 

  -Edo

1 Answer, 1 is accepted

Sort by
0
Hristian Stefanov
Telerik team
answered on 18 Sep 2023, 10:45 AM

Hi Edo,

You can change the labels position in the desired way by using the following CSS:

@using Telerik.FontIcons

<style>
    .k-step-list-horizontal .k-step-link {
        flex-direction: row;
    }

    .k-stepper .k-step-label {
        background-color: white;
    }
</style>

<TelerikWizard @bind-Value="@WizardValue">
    <WizardSettings>
        <WizardStepperSettings Linear="false" />
    </WizardSettings>
    <WizardSteps>
        <WizardStep Label="Start" Icon="@FontIcon.Gear">
            <Content>
                <p>Welcome to the Wizard!</p>
            </Content>
        </WizardStep>
        <WizardStep Label="Survey" Icon="@FontIcon.Pencil">
            <Content>
                <p>The user is performing some actions...</p>
            </Content>
        </WizardStep>
        <WizardStep Label="Finish">
            <Content>
                <p>Thank you!</p>
            </Content>
        </WizardStep>
    </WizardSteps>
</TelerikWizard>

<p><strong>Wizard Value: @WizardValue</strong></p>

@code {
    int WizardValue { get; set; }
}

Please run and test it to see the result.

Regards,
Hristian Stefanov
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Tags
Wizard
Asked by
Edo
Top achievements
Rank 1
Answers by
Hristian Stefanov
Telerik team
Share this question
or