Wizard Text Wrapping

Environment

Product

Wizard for Blazor

Description

How to allow the TelerikWizard to show the full text of the step labels. For instance, step labels in my Wizard component are getting cut off, and I wish to display the complete text by wrapping it onto the next line.

Solution

To wrap the Wizard step labels and display the full text, apply custom CSS styles. These styles allow the text to wrap in the Wizard steps and break words if necessary to fit the content within the available space.

Wrap Wizard step label text

<style>
    .k-wizard .k-step .k-step-text {
        white-space: normal; /* Allow text to wrap */
        word-wrap: break-word; /* Break words if necessary */
    }
</style>

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

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

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

See Also

• Wizard Overview
• Override the Theme or Apply Custom CSS Styles