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

How to make wizard step height 100%

5 Answers 106 Views
Wizard
This is a migrated thread and some comments may be shown as answers.
Al
Top achievements
Rank 1
Iron
Iron
Veteran
Al asked on 23 Jul 2015, 10:13 AM

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.

5 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 27 Jul 2015, 07:21 AM
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
0
Al
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 29 Sep 2015, 10:32 AM

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?

0
Vessy
Telerik team
answered on 29 Sep 2015, 11:45 AM
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
0
Al
Top achievements
Rank 1
Iron
Iron
Veteran
answered on 29 Sep 2015, 11:54 AM
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?
0
Vessy
Telerik team
answered on 30 Sep 2015, 11:57 AM
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
Tags
Wizard
Asked by
Al
Top achievements
Rank 1
Iron
Iron
Veteran
Answers by
Vessy
Telerik team
Al
Top achievements
Rank 1
Iron
Iron
Veteran
Share this question
or