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

Hidden tab's content appears beneath modal popup

3 Answers 39 Views
Grid
This is a migrated thread and some comments may be shown as answers.
jlj30
Top achievements
Rank 2
jlj30 asked on 30 Sep 2012, 05:39 PM
Hi,

I have a FormTemplate with a tabstrip containing 2 tabs.
Depending on a condition, the 2nd tab is hidden in code behind.
However, in IE8 the content of this 2nd hidden tab is visible immediately below the bottom of the popup.
This behavior is NOT present in Firefox, Chrome or Safari.

I have attached a screenshot showing the issue.

I have included the declaration for the FormTemplate as well:
<FormTemplate>
    <div id="divEdit" runat="server" class="formTemplate" style="height: 520px;">
        <div style="margin-bottom: 4px;">
            <telerik:RadButton ID="btnQSAddUpdate" runat="server" Text="Update" CommandName="Update">
            </telerik:RadButton>
            <telerik:RadButton ID="btnQSCancel" runat="server" Text="Cancel" CausesValidation="False"
                CommandName="Cancel">
            </telerik:RadButton>
        </div>
        <telerik:RadTabStrip runat="server" ID="tabTaskJournal" MultiPageID="Multipage1"
            SelectedIndex="0">
            <Tabs>
                <telerik:RadTab runat="server" ID="tabMessages" Text="Start/End Messages" PageViewID="pagMessages"
                    Selected="true">
                </telerik:RadTab>
                <telerik:RadTab runat="server" ID="tabDemographics" Text="Demographics" PageViewID="pagDemographics"
                 OnPreRender="tabDemographics_PreRender">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTabStrip>
        <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">
            <telerik:RadPageView runat="server" ID="pagMessages">
                <table class="formTemplateTable">
                    <tr>
                        <td style="width: 30%;">
                             
                             
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">
                            <asp:Label ID="lblBegin" runat="server" ToolTip="Specify the start message that will appear at the beginning of the assessment"
                                Text="Start Content" Font-Size="Small" Font-Bold="true"></asp:Label>
                            <asp:RequiredFieldValidator ID="valStartMsg" runat="server" ControlToValidate="edtBeginMsgRichText"
                                ErrorMessage="** REQUIRED **"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadEditor EnableEmbeddedSkins="true" Skin="Vista" ID="edtBeginMsgRichText"
                                runat="server" EnableAjaxSkinRendering="true" Content='<%# Bind("BeginContent") %>'
                                Width="740px" Height="200px" ImageManager-ViewPaths='<%# (string[])Session["currentCustomerImagesViewPath"] %>'
                                ImageManager-UploadPaths='<%# (string[])Session["currentCustomerImagesUploadPath"] %>'
                                ExternalDialogsPath="~/EditorDialogs" ToolTip="Specify the start message that will appear at the beginning of the assessment">
                                <Tools>
                                    <telerik:EditorToolGroup Tag="MainToolbar">
                                        <telerik:EditorSplitButton Name="Undo">
                                        </telerik:EditorSplitButton>
                                        <telerik:EditorSplitButton Name="Redo">
                                        </telerik:EditorSplitButton>
                                        <telerik:EditorSeparator />
                                        <telerik:EditorTool Name="Cut" />
                                        <telerik:EditorTool Name="Copy" />
                                        <telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Formatting">
                                        <telerik:EditorTool Name="Bold" />
                                        <telerik:EditorTool Name="Italic" />
                                        <telerik:EditorTool Name="Underline" />
                                        <telerik:EditorSeparator />
                                        <telerik:EditorSplitButton Name="ForeColor">
                                        </telerik:EditorSplitButton>
                                        <telerik:EditorSplitButton Name="BackColor">
                                        </telerik:EditorSplitButton>
                                        <telerik:EditorSeparator />
                                        <telerik:EditorDropDown Name="FontName">
                                        </telerik:EditorDropDown>
                                        <telerik:EditorDropDown Name="FontSize">
                                        </telerik:EditorDropDown>
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Alignment">
                                        <telerik:EditorTool Name="Indent" />
                                        <telerik:EditorTool Name="Outdent" />
                                        <telerik:EditorTool Name="JustifyLeft" />
                                        <telerik:EditorTool Name="JustifyCenter" />
                                        <telerik:EditorTool Name="JustifyRight" />
                                        <telerik:EditorTool Name="JustifyFull" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Tables">
                                        <telerik:EditorSeparator />
                                        <telerik:EditorTool Name="InsertTable" />
                                        <telerik:EditorTool Name="ToggleTableBorder" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Lists">
                                        <telerik:EditorTool Name="InsertUnorderedList" />
                                        <telerik:EditorTool Name="InsertOrderedList" />
                                        <telerik:EditorTool Name="InsertHorizontalRule" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="ImagesAndLinks">
                                        <telerik:EditorTool Name="InsertLink" />
                                        <telerik:EditorTool Name="Unlink" />
                                        <telerik:EditorTool Name="ImageManager" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Spell">
                                        <telerik:EditorTool Name="AjaxSpellCheck" />
                                    </telerik:EditorToolGroup>
                                </Tools>
                            </telerik:RadEditor>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: left;">
                            <asp:Label ID="Label1" runat="server" ToolTip="Specify the start message that will appear at the end of the assessment"
                                Text="End Content" Font-Size="Small" Font-Bold="true"></asp:Label>
                            <asp:RequiredFieldValidator ID="valEndMsg" runat="server" ControlToValidate="edtEndMsgRichText"
                                ErrorMessage="** REQUIRED **"></asp:RequiredFieldValidator>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <telerik:RadEditor EnableEmbeddedSkins="true" Skin="Vista" ID="edtEndMsgRichText"
                                runat="server" EnableAjaxSkinRendering="true" Content='<%# Bind("EndContent") %>'
                                Width="740px" Height="200px" ImageManager-ViewPaths='<%# (string[])Session["currentCustomerImagesViewPath"] %>'
                                ImageManager-UploadPaths='<%# (string[])Session["currentCustomerImagesUploadPath"] %>'
                                ExternalDialogsPath="~/EditorDialogs" ToolTip="Specify the start message that will appear at the end of the assessment">
                                <Tools>
                                    <telerik:EditorToolGroup Tag="MainToolbar">
                                        <telerik:EditorSplitButton Name="Undo">
                                        </telerik:EditorSplitButton>
                                        <telerik:EditorSplitButton Name="Redo">
                                        </telerik:EditorSplitButton>
                                        <telerik:EditorSeparator />
                                        <telerik:EditorTool Name="Cut" />
                                        <telerik:EditorTool Name="Copy" />
                                        <telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Formatting">
                                        <telerik:EditorTool Name="Bold" />
                                        <telerik:EditorTool Name="Italic" />
                                        <telerik:EditorTool Name="Underline" />
                                        <telerik:EditorSeparator />
                                        <telerik:EditorSplitButton Name="ForeColor">
                                        </telerik:EditorSplitButton>
                                        <telerik:EditorSplitButton Name="BackColor">
                                        </telerik:EditorSplitButton>
                                        <telerik:EditorSeparator />
                                        <telerik:EditorDropDown Name="FontName">
                                        </telerik:EditorDropDown>
                                        <telerik:EditorDropDown Name="FontSize">
                                        </telerik:EditorDropDown>
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Alignment">
                                        <telerik:EditorTool Name="Indent" />
                                        <telerik:EditorTool Name="Outdent" />
                                        <telerik:EditorTool Name="JustifyLeft" />
                                        <telerik:EditorTool Name="JustifyCenter" />
                                        <telerik:EditorTool Name="JustifyRight" />
                                        <telerik:EditorTool Name="JustifyFull" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Tables">
                                        <telerik:EditorTool Name="InsertTable" />
                                        <telerik:EditorTool Name="ToggleTableBorder" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Lists">
                                        <telerik:EditorTool Name="InsertUnorderedList" />
                                        <telerik:EditorTool Name="InsertOrderedList" />
                                        <telerik:EditorTool Name="InsertHorizontalRule" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="ImagesAndLinks">
                                        <telerik:EditorSeparator />
                                        <telerik:EditorTool Name="InsertLink" />
                                        <telerik:EditorTool Name="Unlink" />
                                        <telerik:EditorTool Name="ImageManager" />
                                    </telerik:EditorToolGroup>
                                    <telerik:EditorToolGroup Tag="Spell">
                                        <telerik:EditorTool Name="AjaxSpellCheck" />
                                    </telerik:EditorToolGroup>
                                </Tools>
                            </telerik:RadEditor>
                        </td>
                    </tr>
                </table>
            </telerik:RadPageView>
            <telerik:RadPageView runat="server" ID="pagDemographics">
                 
                <table style="width:90%; border-color:Teal; border-width:2px; border-style:solid; margin:25px; padding:10px; ">
                    <tr>
                        <td style="width: 50%; background-color:#ADDBF7;">
                            <asp:Label ID="Label2" runat="server" Text="Field Name" Font-Bold="true"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#ADDBF7;">
                            <asp:Label ID="Label3" runat="server" Text="Capture" Font-Bold="true"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#ADDBF7;">
                            <asp:Label ID="Label4" runat="server" Text="Mandatory" Font-Bold="true"></asp:Label>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; background-color:White;">
                            <asp:Label ID="lblFirstName" runat="server" Text="First Name"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:White;">
                            <telerik:RadButton ID="chkFirstName_Vis" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" OnPreRender="chkFirstName_Vis_Prerender">
                            </telerik:RadButton>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:White;">
                            <telerik:RadButton ID="chkFirstName_Man" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; border-color:Teal; background-color:#EFEFF7;">
                            <asp:Label ID="lblLastName" runat="server" Text="Last Name"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#EFEFF7;">
                            <telerik:RadButton ID="chkLastName_Vis" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#EFEFF7;">
                            <telerik:RadButton ID="chkLastName_Man" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; background-color:White;">
                            <asp:Label ID="lblCompany" runat="server" Text="Company"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:White;">
                            <telerik:RadButton ID="chkCompany_Vis" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:White;">
                            <telerik:RadButton ID="chkCompany_Man" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; background-color:#EFEFF7;">
                            <asp:Label ID="lblEmail" runat="server" Text="Email Address"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#EFEFF7;">
                            <telerik:RadButton ID="chkEmail_Vis" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#EFEFF7;">
                            <telerik:RadButton ID="chkEmail_Man" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; background-color:White;">
                            <asp:Label ID="lblCountry" runat="server" Text="Country (dropdown list)"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:White;">
                            <telerik:RadButton ID="chkCountry_Vis" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:White;">
                            <telerik:RadButton ID="chkCountry_Man" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; background-color:#EFEFF7;">
                            <asp:Label ID="lblSubdivision" runat="server" Text="State/Province"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#EFEFF7;">
                            <telerik:RadButton ID="chkSubdivision_Vis" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#EFEFF7;">
                            <telerik:RadButton ID="chkSubdivision_Man" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; background-color:White;">
                            <asp:Label ID="LblJobFunction" runat="server" Text="Job Function (dropdown list)"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:White;">
                            <telerik:RadButton ID="chkJobFunction_Vis" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:White;">
                            <telerik:RadButton ID="chkJobFunction_Man" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                    </tr>
                    <tr>
                        <td style="width: 50%; background-color:#EFEFF7;">
                            <asp:Label ID="lblIndustry" runat="server" Text="Industry Sector (dropdown list)"></asp:Label>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#EFEFF7;">
                            <telerik:RadButton ID="chkIndustry_Vis" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                        <td style="width: 25%; text-align: center; background-color:#EFEFF7;">
                            <telerik:RadButton ID="chkIndustry_Man" runat="server" Text=""  ButtonType="ToggleButton"
                                ToggleType="CheckBox" AutoPostBack="false" >
                            </telerik:RadButton>
                        </td>
                    </tr>
                </table>
                <div style="margin-left: 25px;">
                    <p>
                        Notes on capturing demographics from survey participants:</p>
                    <ul>
                        <li>Check the Capture box to prompt the user for the corresponding information </li>
                        <li>Check the Mandatory box if the user "must" provide this information before completing
                            the survey</li>
                        <li>The capture of demographics is not gauranteed, since users may opt to close their
                            browser when this page is presented</li>
                    </ul>
                </div>
            </telerik:RadPageView>
        </telerik:RadMultiPage>
    </div>
</FormTemplate>

Any thoughts on what could be causing this?

Jim

3 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 04 Oct 2012, 07:13 AM
Hello Jim,

In this scenario as you need the second tab to be hidden I would suggest you to set the RenderSelectedPageOnly property to "true" for the RadMultiPage control and verify if this makes a difference.

Kind regards,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
jlj30
Top achievements
Rank 2
answered on 04 Oct 2012, 05:11 PM
Hi Maria,

Yes, setting RenderSelectedPageOnly to true did resolve the issue.
However, for pages where the 2nd tab is visible, when I click on it, it is empty.
Is there something special I need to do to request the tab content?
I thought this would happen automatically.

Thanks

Jim
0
Maria Ilieva
Telerik team
answered on 09 Oct 2012, 11:06 AM
Hello Jim,

Basically after setting the RenderSelectedPageOnly property to "true"  the content of the cores[ponding tab should be automatically load after the postback. Could please inspect the request using the IE developer tool and verify if any js errors appear when trying to load the problematic tab.

Greetings,
Maria Ilieva
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
Grid
Asked by
jlj30
Top achievements
Rank 2
Answers by
Maria Ilieva
Telerik team
jlj30
Top achievements
Rank 2
Share this question
or