How to make wizard step height 100%

6 posts, 0 answers
  1. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 23 Jul 2015 Link to this post

    Hi,

    I have a wizard contained in a splitter + pane, the splitter and all it's parents have heights set to 100% and all is good. Now the problem comes with RadWizardStep because I cannot see how to set the height to 100% for the step, this means that any controls contained by the step cannot have 100% height because the parent (RadWizardStep) does not have a height set.

    eg. if one of my steps has a radgrid then I need to set a specific px height for the grid and this is bad for me.

  2. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 27 Jul 2015 Link to this post

    Hi Al,

    I have just answered your support ticket on the subject, for convenience I am pasting my answer here as well:

    You can set the height of a Wizard Step by adding a CSS class to it, and declaring the desired dimensions through it. For example:
    <telerik:RadWizard ID="RadWizard1" runat="server" Height="350px" Width="500px">
        <WizardSteps>
            <telerik:RadWizardStep Title="Log in" CssClass="loginStep">
                <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" ResizeWithParentPane="false"
                    BackColor="red"
                    Height="90%"
                    Width="90%">
                    ..
                </telerik:RadSplitter>
            </telerik:RadWizardStep>
    <style>
        .loginStep
        {
            height: 100%;
        }
    </style>


    Regards,
    Vessy
    Telerik
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 29 Sep 2015 in reply to Vessy Link to this post

    Thanks Vessy,

    I am revisiting this again - your solution above works fine if a fixed height is set to the RadWizard (350px above) but If I set 100% to the RadWizard then it doesn't work (all my containers are correctly sized). How do I get a wizard to fill 100% of available height and have the wizard pages do the same?

  5. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 29 Sep 2015 Link to this post

    Hi Alwin,

    As explained in one of your previous threads on the subject, RadWizad does not support occupying width and height in percent of a parent container and achieving such layout is not a straight-forward task. Please, refer your support ticket with ID 959983, where this limitation is described in details along with a possible way to work around it. Still, we cannot assure you that this approach can be used successfully in all scenarios as the RadWizard control is designed to size itself depending on its content height, but not depending on a parent's one.


    Regards,
    Vessy
    Telerik
  6. Al
    Al avatar
    203 posts
    Member since:
    Oct 2006

    Posted 29 Sep 2015 in reply to Vessy Link to this post

    Thanks Vessy, I may have misunderstood. So if I have a wizard page that contains a splitter then I should not set size on the wizard but rather size the splitter explicitly and then the wizard follow?
  7. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 30 Sep 2015 Link to this post

    Hi,

    That's right Al - if you configure the size of the Splitter, the Wizard will wrap itself around the splitter. For example you can have a similar configuration:
    <telerik:RadWizard ID="RadWizard1" runat="server" >
        <WizardSteps>
            <telerik:RadWizardStep Title="Log in">
                <telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Horizontal" ResizeWithParentPane="false"
                    BackColor="red"
                    Height="900px"
                    Width="90%">
                    <telerik:RadPane runat="server" ID="RadPane" Height="200px">
                    </telerik:RadPane>
                    <telerik:RadSplitBar runat="server" ID="RadSplitbar1" CollapseMode="Forward">
                    </telerik:RadSplitBar>
                    <telerik:RadPane runat="server" ID="Radpane2" Width="70%">
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadWizardStep>
        </WizardSteps>
    </telerik:RadWizard>


    Regards,
    Vessy
    Telerik
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017