Multipage issue with vertical tabs

[Steven]

I cannot get my RadMultiPage to line up with a VerticalLeft tabstrip. It shows up below the tabstrip instead of along side of it.  If I change it to VerticalRight it works fine and shows up along side of the tab strip.  Also, do nested tabs always show up under the parent tab? If so, how can change the size of the nested tabs so they do not look like the parent tab?

Any help would be greatly appreciated!

Here is my code:

<radM:RadTabStrip ID="tabstripBrandingOptions" runat="server" Orientation="VerticalLeft"
        SelectedIndex="0" CausesValidation="False" MultiPageID="MultiPageBranding" Skin="Vista">
        <Tabs>
            <radM:RadTab Text="Add Provider">
            </radM:RadTab>
            <radM:RadTab Text="Linked Enterprises" runat="server">
            </radM:RadTab>
            <radM:RadTab Text="Netspoke Pro Options" runat="server">
            </radM:RadTab>
            <radM:RadTab Text="Branding Options" runat="server">
                <Tabs>
                    <radM:RadTab Text="Web Conf. Logo">
                    </radM:RadTab>
                    <radM:RadTab Text="Hub Logo">
                    </radM:RadTab>
                    <radM:RadTab Text="Marketing Links">
                    </radM:RadTab>
                    <radM:RadTab Text="Logo Text">
                    </radM:RadTab>
                </Tabs>
            </radM:RadTab>
        </Tabs>
    </radM:RadTabStrip>
    <radM:RadMultiPage ID="MultiPageBranding" runat="server" SelectedIndex="0" CssClass="multiPage">
        <radM:RadPageView runat="server">
            <div class="yui-gd">
                <div class="yui-g first leftDiv">
                    <asp:Localize ID="locProviderName" runat="server" Text="Provider Name:" />&nbsp;<span
                        class="required">*</span>
                    <br />
                    <asp:Localize ID="locProviderType" runat="server" Text="Provider Type:" />&nbsp;<span
                        class="required">*</span>
                    <br />
                    <asp:Localize ID="locHubGroupDomain" runat="server" Text="Hub Group Domain:" />&nbsp;<span
                        class="required">*</span>
                    <br />
                    <asp:Localize ID="locDefaultMeetingServer" Text="Default Meeting Server:" runat="server" />&nbsp;<span
                        class="required">*</span>
                    <br />
                    <asp:Localize ID="locSecureDefaultMeetingServer" Text="Secure Default Meeting Server:"
                        runat="server" />&nbsp;<span class="required">*</span>
                    <br />
                    <asp:Localize ID="locAppShareHost" Text="App Share Host:" runat="server" />&nbsp;<span
                        class="required">*</span>
                    <br />
                    <asp:Localize ID="locCustomerHomePage" runat="server" Text="Customer Home Page:" />&nbsp;<span
                        class="required">*</span>
                    <br />
                    <asp:Localize ID="locDefaultConferenceTitle" runat="server" Text="Default Conference Title:" />&nbsp;<span
                        class="required">*</span>
                    <br />
                    <asp:Localize ID="locDefaultModeratorEmailSubject" runat="server" Text="Default Moderator Email Subject:" />&nbsp;<span
                        class="required">*</span>
                    <br />
                    <asp:Localize ID="locDefaultAttendeeEmailSubject" runat="server" Text="Default Attendee Email Subject:" />&nbsp;<span
                        class="required">*</span>
                </div>
                <div class="yui-g rightDiv">
                    <asp:TextBox runat="server" ID="txtProviderName" Width="214px" />
                    <asp:RequiredFieldValidator ID="rvProviderName" runat="server" ControlToValidate="txtProviderName"
                        Display="Dynamic" ErrorMessage="Provider Name is required" SetFocusOnError="True"></asp:RequiredFieldValidator>
                    &nbsp;
                    <asp:RegularExpressionValidator ID="revProviderName" runat="server" ErrorMessage="Only alphanumeric characters and spaces allowed."
                        ControlToValidate="txtProviderName" Display="Dynamic" SetFocusOnError="True"
                        ValidationExpression="^[0-9a-zA-Z ]+$"></asp:RegularExpressionValidator>
                    <br />
                    <asp:DropDownList ID="ddlProviderType" runat="server" />
                    <br />
                    <asp:TextBox ID="txtHubGroupDomain" runat="server" onchange="SetText()" Width="214px" />
                    <asp:RequiredFieldValidator ID="rvHubGrpDomain" runat="server" ControlToValidate="txtHubGroupDomain"
                        Display="Dynamic" ErrorMessage="Hub Group Domain is required" SetFocusOnError="True"></asp:RequiredFieldValidator>
                    &nbsp;
                    <asp:RegularExpressionValidator ID="revHubGroupDomain" runat="server" ErrorMessage="Not a valid domain name."
                        ControlToValidate="txtHubGroupDomain" Display="Dynamic" SetFocusOnError="True"
                        ValidationExpression="^([a-zA-Z0-9]([a-zA-Z0-9\-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]{2,6}$"></asp:RegularExpressionValidator>
                    <br />
                    <asp:TextBox ID="txtDefualtMeetingServer" runat="server" Width="214px" />
                    <input id="inpMeetingServerAppend" readonly="readonly" runat="server" type="text" />
                    <asp:RequiredFieldValidator ID="rvDefMtngServer" runat="server" ControlToValidate="txtDefualtMeetingServer"
                        Display="Dynamic" ErrorMessage="Default Meeting Server is required" SetFocusOnError="True"></asp:RequiredFieldValidator>
                    &nbsp;
                    <asp:RegularExpressionValidator ID="revdefMeetingServer" runat="server" ErrorMessage="Only numbers, letters, or dashes allowed."
                        ControlToValidate="txtDefualtMeetingServer" Display="Dynamic" SetFocusOnError="True"
                        ValidationExpression="(^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]$)"></asp:RegularExpressionValidator>
                    <br />
                    <asp:TextBox ID="txtSecureDefaultMeetingServer" runat="server" Width="214px" />
                    <input id="inpSecureMeetingServerAppend" readonly="readonly" runat="server" type="text" />
                    <asp:RequiredFieldValidator ID="rvSecDefMtngServer" runat="server" ControlToValidate="txtSecureDefaultMeetingServer"
                        Display="Dynamic" ErrorMessage="Secure Default Meeting Server is required" SetFocusOnError="True"></asp:RequiredFieldValidator>
                    &nbsp;
                    <asp:RegularExpressionValidator ID="revSecDefMeetingServer" runat="server" ErrorMessage="Only numbers, letters, or dashes allowed."
                        ControlToValidate="txtSecureDefaultMeetingServer" Display="Dynamic" SetFocusOnError="True"
                        ValidationExpression="(^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]$)"></asp:RegularExpressionValidator>
                    <br />
                    <asp:TextBox ID="txtAppShareHost" runat="server" Width="214px" />
                    <input id="inpAppShareHostAppend" readonly="readonly" runat="server" type="text" />
                    <asp:RequiredFieldValidator ID="rvAppShareHost" runat="server" ControlToValidate="txtAppShareHost"
                        Display="Dynamic" ErrorMessage="App Share Host is required" SetFocusOnError="True"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revAppShareHost" runat="server" ErrorMessage="Only numbers, letters, or dashes allowed."
                        ControlToValidate="txtAppShareHost" Display="Dynamic" SetFocusOnError="True"
                        ValidationExpression="(^[a-zA-Z0-9][a-zA-Z0-9-]*[a-zA-Z0-9]$)"></asp:RegularExpressionValidator>
                    <br />
                    <asp:TextBox ID="txtCustomerHomePage" runat="server" Width="214px" />
                    <asp:RequiredFieldValidator ID="rvCustomerHomePage" runat="server" ControlToValidate="txtCustomerHomePage"
                        Display="Dynamic" ErrorMessage="Customer Home Page is required" SetFocusOnError="True"></asp:RequiredFieldValidator>
                    &nbsp;<asp:RegularExpressionValidator ID="revHomePage" runat="server" ErrorMessage="Not a valid url."
                        ControlToValidate="txtCustomerHomePage" Display="Dynamic" SetFocusOnError="True"
                        ValidationExpression="http(s)?://([\w-]+\.)+[\w-]+(/[\w- ./?%&amp;=]*)?"></asp:RegularExpressionValidator>
                    <br />
                    <asp:TextBox ID="txtDefaultConferenceTitle" runat="server" Width="214px" />
                    <asp:RequiredFieldValidator ID="rvDefaultConferenceTitle" runat="server" ControlToValidate="txtDefaultConferenceTitle"
                        Display="Dynamic" ErrorMessage="Default Conference Title is required" SetFocusOnError="True"></asp:RequiredFieldValidator>
                    <br />
                    <asp:TextBox ID="txtDefaultModeratorEmailSubject" runat="server" Width="214px" />
                    <asp:CheckBox ID="chkModeratorSameAsTitle" runat="server" Text="Same as title" />
                    <asp:CustomValidator ControlToValidate="txtDefaultModeratorEmailSubject" ID="valDefaultModeratorEmailSubject"
                        runat="server" ErrorMessage="Default Moderator Email Subject is required" ValidateEmptyText="true"
                        SetFocusOnError="true" Display="Dynamic" />
                    <br />
                    <asp:TextBox ID="txtDefaultAttendeeEmailSubject" runat="server" Width="214px" />
                    <asp:CheckBox ID="chkAttendeeSameAsTitle" runat="server" Text="Same as title" />
                    <asp:CustomValidator ControlToValidate="txtDefaultAttendeeEmailSubject" ID="valDefaultAttendeeEmailSubject"
                        runat="server" ErrorMessage="Default Attendee Email Subject is required" ValidateEmptyText="true"
                        SetFocusOnError="true" Display="Dynamic" />
                </div>
            </div>
        </radM:RadPageView>
        <radM:RadPageView runat="server">
            <div id="doc3">
                <asp:UpdateProgress ID="UpdateProgressEnterprises" runat="server" AssociatedUpdatePanelID="updatePanelEnterprises"
                    DisplayAfter="0">
                    <ProgressTemplate>
                        <asp:Image ID="imgAjaxProgress" runat="server" ImageUrl="~/images/ajax-loader.gif" />
                    </ProgressTemplate>
                </asp:UpdateProgress>
                <asp:UpdatePanel ID="updatePanelEnterprises" runat="server">
                    <ContentTemplate>
                        <div style="width: 900px;">
                            <table class="widetable">
                                <tr>
                                    <td>
                                        <strong>
                                            <asp:Localize ID="Localize3" runat="server" Text="Enterprise Name:" /></strong>
                                    </td>
                                    <td>
                                        <asp:TextBox ID="txtEnterpriseName" runat="server" Width="214px" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <strong>
                                            <asp:Localize ID="Localize6" runat="server" Text="Enterprise Type:" /></strong>
                                    </td>
                                    <td align="left">
                                        <asp:DropDownList ID="ddlEnterpriseType" runat="server">
                                        </asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td align="left">
                                        <asp:Button ID="btnSearchEnterprise" runat="server" CssClass="brandingButton" Text="Search"
                                            OnClick="btnSearchEnterprise_Click" UseSubmitBehavior="False" CausesValidation="False" />
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <div style="width: 900px;">
                            <table>
                                <tr>
                                    <td align="center">
                                        <strong>
                                            <asp:Localize ID="locAvaiableEnterprises" runat="server" Text="Search Results" />
                                        </strong>
                                    </td>
                                    <td align="center">
                                    </td>
                                    <td align="center">
                                        <strong>
                                            <asp:Localize ID="locSelectedEnterprises" runat="server" Text="Selected Enterprises" />
                                        </strong>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:ListBox ID="lstSearchResults" runat="server" Rows="10" SelectionMode="Multiple"
                                            Width="280px"></asp:ListBox>
                                    </td>
                                    <td align="center" valign="middle">
                                        <asp:Button ID="btnAddEnterprise" runat="server" CssClass="brandingButton" OnClick="btnAddEnterprise_Click"
                                            Text="Add&gt;&gt;" UseSubmitBehavior="False" CausesValidation="False" />
                                    </td>
                                    <td valign="middle">
                                        <asp:ListBox ID="lstSelectedEnterprises" runat="server" Rows="10" SelectionMode="Multiple"
                                            Width="280px"></asp:ListBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center">
                                        <asp:Button ID="btnClearResults" runat="server" CausesValidation="False" CssClass="brandingButton"
                                            OnClick="btnClearResults_Click" Text="Clear Search" UseSubmitBehavior="False" />
                                    </td>
                                    <td>
                                    </td>
                                    <td align="center">
                                        <asp:Button ID="btnDeleteSelected" runat="server" CssClass="brandingButton" OnClick="btnDeleteSelected_Click"
                                            Text="Delete Selected" UseSubmitBehavior="False" CausesValidation="False" />
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </ContentTemplate>
                    <Triggers>
                        <asp:AsyncPostBackTrigger ControlID="btnSearchEnterprise" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="btnAddEnterprise" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="btnDeleteSelected" EventName="Click" />
                        <asp:AsyncPostBackTrigger ControlID="btnClearResults" EventName="Click" />
                    </Triggers>
                </asp:UpdatePanel>
            </div>
        </radM:RadPageView>
        <radM:RadPageView runat="server">
            <div class="yui-gb">
                <div class="yui-g first">
                    <strong>
                        <asp:Localize ID="locScheduleOptions" runat="server" Text="Scheduling/Joining" /></strong><br />
                    <asp:CheckBox ID="chkRequirePasscodeChecked" runat="server" Text="Conference private by default" /><br />
                    <asp:CheckBox ID="chkJoinNoiseEnabled" runat="server" Text="Audio alert when someone joins" /><br />
                    <asp:CheckBox ID="chkCallMyPhoneEnabled" runat="server" Text="Enable call my phone feature" /><br />
                    <asp:CheckBox ID="chkPresentationsChecked" runat="server" Text="All uploaded presentations available" /><br />
                    <asp:CheckBox ID="chkPollingChecked" runat="server" Text="All uploaded polling questions available" /><br />
                    <asp:CheckBox ID="chkWebRecordingConfigEnabled" runat="server" Text="Web recording is modifiable in scheduling" /><br />
                    <asp:CheckBox ID="chkRecordAllWeb" runat="server" Text="Record all web conference events" /><br />
                </div>
                <div class="yui-g">
                    <strong>
                        <asp:Localize ID="locConferenceOptions" runat="server" Text="In Conference" /></strong><br />
                    <asp:CheckBox ID="chkQAEnabled" runat="server" Text="Enable Q&A" /><br />
                    <asp:CheckBox ID="chkWebRecordingEnabled" runat="server" Text="Enable web recording option" /><br />
                    <asp:CheckBox ID="chkChatEnabled" runat="server" Text="Enable chat" /><br />
                    <asp:CheckBox ID="chkBlockSharingEntireDesktop" runat="server" Text="Enable desktop sharing" /><br />
                    <asp:CheckBox ID="chkAppShareEnabled" runat="server" Text="Enable AppShare" /><br />
                    <asp:CheckBox ID="chkSharingVideoEnabled" runat="server" Text="Enable video" /><br />
                    <asp:CheckBox ID="chkSharedFilesEnabled" runat="server" Text="Enable file transfer" /><br />
                    <asp:CheckBox ID="chkPollingEnabled" runat="server" Text="Enable polling" /><br />
                    <asp:CheckBox ID="chkWhiteboardEnabled" runat="server" Text="Enable whiteboard" /><br />
                    <asp:CheckBox ID="chkPresentationsEnabled" runat="server" Text="Enable PowerPoint sharing" /><br />
                    <asp:CheckBox ID="chkHelpEnabled" runat="server" Text="Enable live help" /><br />
                </div>
                <div class="yui-g">
                    <strong>
                        <asp:Localize ID="locAppShareOptions" runat="server" Text="AppShare/Communication" /></strong><br />
                    <asp:CheckBox ID="chkAppShareMaskingEnabled" runat="server" Text="Hide pop-up windows when sharing" /><br />
                    <asp:CheckBox ID="chkGrantControlEnabled" runat="server" Text="Grant control to participants enabled" /><br />
                    <asp:CheckBox ID="chkSecure" runat="server" Text="SSL enabled for all conferences by default" /><br />
                    <asp:Label ID="lblAppShareColorDepth" runat="server" Text="Set default AppShare color level" />
                    <asp:DropDownList ID="ddlAppShareColorDepth" runat="server">
                        <asp:ListItem Text="Low" Value="8" />
                        <asp:ListItem Text="High" Value="16" />
                    </asp:DropDownList>
                    <br />
                </div>
            </div>
        </radM:RadPageView>
        <radM:RadPageView runat="server">
            <strong>
                <asp:Localize ID="locWebLogoCurrent" runat="Server" Text="Web Conference Logo:" />
            </strong>
            <asp:Image ID="imgConfLogo" runat="server" CssClass="previewImage" /><br />
            <br />
            <asp:Localize ID="Localize1" runat="server" Text="Select Conference Logo for upload:" /><br />
            <radM:RadUpload ID="RadUploadWebConfLogo" runat="server" InitialFileInputsCount="1"
                ControlObjectsVisibility="None" MaxFileSize="262144000" MaxFileInputsCount="1"
                OnValidatingFile="RadUpload_ValidatingFile" Width="100%" EnableFileInputSkinning="false" />
            <p>
                <asp:Localize ID="Localize5" runat="Server" Text="<i><strong>Logo Requirements:</strong><br>&#8226; The file must be in <strong>.jpg or .gif</strong> format<br>&#8226; The image must not exceed <strong>150W x 38H</strong> px<br>&#8226; The file size must not exceed <strong>128</strong> kb</i>." />
            </p>
            <asp:Button ID="btnWebConfLogoPreview" runat="server" Text="Preview" OnClick="btnWebConfLogoPreview_Click"
                CssClass="brandingButton" UseSubmitBehavior="False" />
            <asp:HiddenField ID="hfWebConfLogo" runat="server" />
        </radM:RadPageView>
        <radM:RadPageView runat="server">
            <strong>
                <asp:Localize ID="locHubLogoCurrent" runat="Server" Text="Conferencing Hub Logo:" />
            </strong>
            <asp:Image ID="imgHeaderLogo" runat="server" CssClass="previewImage" /><br />
            <br />
            <asp:Localize ID="Localize2" runat="Server" Text="Select Conferencing Hub Logo for upload:" /><br />
            <radM:RadUpload ID="RadUploadHeaderLogo" runat="server" InitialFileInputsCount="1"
                ControlObjectsVisibility="None" MaxFileSize="262144000" MaxFileInputsCount="1"
                OnValidatingFile="RadUpload_ValidatingFile" Width="100%" EnableFileInputSkinning="false" />
            <p>
                <asp:Localize ID="Localize4" runat="Server" Text="<i><strong>Logo Requirements:</strong><br>&#8226; The file must be in <strong>.jpg or .gif</strong> format<br>&#8226; The image must not exceed <strong>150W x 60H</strong> px<br>&#8226; The file size must not exceed <strong>128</strong> kb</i>." />
            </p>
            <asp:Button ID="btnHeaderLogoPreview" runat="server" Text="Preview" OnClick="btnHeaderLogoPreview_Click"
                CssClass="brandingButton" UseSubmitBehavior="False" />
            <asp:HiddenField ID="hfHeaderLogo" runat="server" />
        </radM:RadPageView>
        <radM:RadPageView runat="server">
            test
        </radM:RadPageView>
        <radM:RadPageView runat="server">
            test
        </radM:RadPageView>
    </radM:RadMultiPage>

Here is my css:

.multiPage
        {


            border:1px solid #94A7B5;
            background-color:#F0F1EB;
            padding:4px;
            padding-left:5px;
            width:775px;
            margin-left:5px;
        }

.leftDiv
{
    float:left;
    width:180px;
    line-height:30px;
    min-height:300px;
    border:1px solid #94A7B5;


}

.rightDiv
{

    line-height:32px;
    min-height:300px;
    border:1px solid #94A7B5;
    width:350px;
}

#doc3
{
    border:1px solid #94A7B5;
}

[Steven]

Can anyone at Telerik help me with this issue?

[Paul]

Hello Steven,

Here's your modified tabstrip definition that works as expected.

<radM:RadTabStrip
    ID="tabstripBrandingOptions"
    runat="server"
    Orientation="VerticalLeft"
    SelectedIndex="0"
    CausesValidation="False"
    MultiPageID="MultiPageBranding"
    Skin="Vista"
    style="float:left">

Regards,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.