Telerik Web Forms Changing the width of a left or right positioned navigation bar

New to Telerik UI for ASP.NET AJAX? Start a free 30-day trial

Environment

Product

RadWizard for ASP.NET AJAX

Description

In scenarios where the page space is limited you might need to reduce the width of the left/right positioned navigation bar of RadWizard:

Wizard Pretty Long Text Navigation Bar

Solution

You can do that via the .rwzVertical .rwzBreadCrumb .rwzLI CSS class:

ASP.NET

<!DOCTYPE html>

<html xmlns="https://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        .rwzVertical .rwzBreadCrumb .rwzLI
        {
            width: 140px !important;
            min-width: 100px !important;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager runat="server" />
        <telerik:RadWizard ID="RadWizard4" runat="server" Width="100%" NavigationBarPosition="Left" ProgressBarPosition="Left" >
            <WizardSteps>
                <telerik:RadWizardStep Title="Very Long Textttttttttttttttttttttttttt">
                    <telerik:RadTextBox ID="RadTextBox3" Label="First Name: " runat="server"></telerik:RadTextBox>
                    <br />
                    <telerik:RadTextBox ID="RadTextBox4" Label="Last Name: " runat="server"></telerik:RadTextBox>
                </telerik:RadWizardStep>
                <telerik:RadWizardStep Title="Very Long Textttttttttttttttttttttttttt">
                </telerik:RadWizardStep>
            </WizardSteps>
        </telerik:RadWizard>
    </form>
</body>
</html>