Hidden tab's content appears beneath modal popup

4 posts, 0 answers
  1. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 30 Sep 2012 Link to this post

    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
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 04 Oct 2012 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jlj30
    jlj30 avatar
    101 posts
    Member since:
    Jan 2011

    Posted 04 Oct 2012 Link to this post

    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
  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 09 Oct 2012 Link to this post

    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.
Back to Top