How to make wizard step height 100%

[Al]

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.

[Vessy]

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

[Al]

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?

[Vessy]

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

[Al]

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?

[Vessy]

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