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

Hidden tab's content appears beneath modal popup

3 Answers 78 Views

Grid

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

jlj30 asked on 30 Sep 2012, 05:39 PM

Start-End-Message-Popup-IE-Issue---30Sep2012.png

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

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.