Height attribute of RadWizard

4 posts, 1 answers
  1. Jo
    Jo avatar
    3 posts
    Member since:
    Oct 2013

    Posted 31 Jan 2015 Link to this post

    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 
  2. Answer
    Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 04 Feb 2015 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Hari
    Hari avatar
    4 posts
    Member since:
    Feb 2014

    Posted 09 Nov in reply to Nencho Link to this post

    Hello Nencho,

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

    Any other go ????

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    835 posts

    Posted 14 Nov Link to this post

    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.
Back to Top