This is a migrated thread and some comments may be shown as answers.

Height attribute of RadWizard

3 Answers 188 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Jo
Top achievements
Rank 1
Jo asked on 31 Jan 2015, 12:25 PM
I am not able to change the height for rwzContent

<div class="rwzContent" style="height: 267px;"> 

Please suggest how to change the height of the rwzContent, and is it possible to get vertical scrollbar?

Thanks 

3 Answers, 1 is accepted

Sort by
0
Accepted
Nencho
Telerik team
answered on 04 Feb 2015, 04:25 PM
Hello Jo,

You can use css style rule to modify the rwzContent height with a strong selector. Please consider the below :

<style type="text/css">
        .rwzContent {
            height: 500px !important;
        }
    </style>

In addition, in order to have a scroll in the step content - you would need to have a container, nested in that step, which should have a greater height. For example :

<telerik:RadWizard ID="RadWizard1" runat="server" Height="420px">
            <WizardSteps>
                <telerik:RadWizardStep ID="RadWizardStep1" Title="Step1" runat="server" StepType="Start">
                    <div style="height: 600px;">
                    </div>
                </telerik:RadWizardStep>


Regards,
Nencho
Telerik
0
Hari
Top achievements
Rank 1
answered on 09 Nov 2016, 09:22 AM

Hello Nencho,

Still i am unable to Set Height Statically for rwzContent Class.. 

Any other go ????

0
Ivan Danchev
Telerik team
answered on 14 Nov 2016, 07:25 AM
Hello Hari,

Here's an example:
<telerik:RadWizard ID="RadWizard1" runat="server" RenderMode="Lightweight">
    <WizardSteps>
        <telerik:RadWizardStep ID="RadWizardStep4" StepType="Step" Title="Step1" runat="server">
            <div style="height: 700px; background-color:lightblue;">Step 1</div>
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="RadWizardStep3" StepType="Step" Title="Step2" runat="server">
            Step 1
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="RadWizardStep1" StepType="Finish" Title="Step3" runat="server">
            Step 1
        </telerik:RadWizardStep>
        <telerik:RadWizardStep ID="RadWizardStep2" runat="server" StepType="Complete">
            Step Complete
        </telerik:RadWizardStep>
    </WizardSteps>
</telerik:RadWizard>

The height of the div in Step 1 is set to 700px. If you apply one of the following two CSS rules the height of corresponding wrapping div element (rwzContent or rwzActive) will be set to 500px and a scroll bar will appear since the Step's content will be higher than its respective wrapping element:
<style>
.RadWizard .rwzContent {
    height: 500px;
}
 
/*.RadWizard .rwzActive {
    height: 500px;
}*/
</style>


Regards,
Ivan Danchev
Telerik by Progress
Check out the new UI for ASP.NET Core, the most complete UI suite for ASP.NET Core development on the market, with 60+ tried-and-tested widgets, based on Kendo UI.
Tags
Wizard
Asked by
Jo
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Hari
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or