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

Tabcontent only visible first time in Internet Explorer 10/11

3 Answers 109 Views

TabStrip

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

Tompa asked on 25 Aug 2016, 08:30 AM

Hi,

I have a RadTabStrip together with a RadMultiPage that loads different aspx pages in each one. Everything works fine in Chrome, but when using IE a certain tab only renders the first time it's clicked. If I select another one and then back again it's blank.

If i enter the browser debugger the pageview/iframe inline style is Height=100% and Width=100%. If I in the debugger disable and renable those settings the page shows up again.

What could be causing this behaviour? I'm using version 2014.1.513.45 but I tried the latest version and the some problem shows there as well.

Here are the aspx code for the tabstrip/multipage:

<table>

<tr class="topMenu">

<td class="productArea">

<div>

<h5>INSERA</h5>

</div>

<div>

<h2>INSIGHT <%=Insight.Components.Security.AssemblyAttributes.GetCurrentAssemblyVersion2Numbers() %></h2>

</div>

</td>

<td style="padding:0;margin:0;">

<telerik:RadTabStrip CssClass="MyTabStrip" RenderMode="Lightweight" ID="RadTabStrip1" runat="server" Skin="" MultiPageID="RadMultiPage1" SelectedIndex="0">

<Tabs>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Home-32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Start %>" Selected="True">

</telerik:RadTab>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Statistics-32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Analysis %>">

</telerik:RadTab>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Coins-32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Prognosis %>">

</telerik:RadTab>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Recycle Sign-32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Environment %>">

</telerik:RadTab>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Page Overview -32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Codeplan %>">

</telerik:RadTab>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Spade-32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Miner %>">

</telerik:RadTab>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Manager-32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Manager %>">

</telerik:RadTab>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Settings-32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Settings %>">

</telerik:RadTab>

<telerik:RadTab CssClass="MyTab" HoveredCssClass="MyTabHovered" SelectedCssClass="MyTabSelected" IsBreak="false" ImageUrl="/Content/graphics/Question Mark-32.png" Text="<%$Resources:Insight.Resource, Tabmenu.Tab.Help %>">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

</td>

<td id="companiesList" class="dropDownSelections">

<uc1:CompanyList runat="server" ID="CompanyList" />

</td>

<td id="areasList" class="dropDownSelections">

<uc1:AreaList runat="server" id="AreaList" />

</td>

<td id="loggedInInfo">

<uc1:LoggedInInfo runat="server" id="LoggedInInfo1" />

</td>

</tr>

</table>

<telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">

<telerik:RadPageView ID="RadPageView1" runat="server" Height="100%" ContentUrl="/Forms/Portal.aspx" CssClass="pageView1 pageView">

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server" Height="100%" ContentUrl="/Forms/Analysis.aspx" CssClass="pageView2 pageView">

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView3" runat="server" Height="100%" ContentUrl="/Forms/Prognosis.aspx" CssClass="pageView3 pageView">

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView4" runat="server" Height="100%" ContentUrl="/Forms/Environment.aspx" CssClass="pageView4 pageView">

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView5" runat="server" Height="100%" ContentUrl="/Forms/Codeplan.aspx" CssClass="pageView5 pageView">

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView6" runat="server" Height="100%" ContentUrl="/Forms/Miner.aspx" CssClass="pageView6 pageView">

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView7" runat="server" Height="100%" ContentUrl="/Forms/Manager.aspx" CssClass="pageView7 pageView">

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView8" runat="server" Height="100%" ContentUrl="/Forms/Settings.aspx" CssClass="pageView8 pageView">

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView9" runat="server" Height="100%" ContentUrl="/Forms/Help.aspx" CssClass="pageView9 pageView">

</telerik:RadPageView>

</telerik:RadMultiPage>

<script type="text/javascript">

function pageLoad() {

var $ = $telerik.$;

var height = $(window).height();

var multiPage = $find("<%=RadMultiPage1.ClientID %>");

var totalHeight = height - 63;

multiPage.get_element().style.height = totalHeight + "px";

}

</script>

3 Answers, 1 is accepted

answered on 25 Aug 2016, 12:16 PM

TabStripPageViewTest.zip

Hello Tomas,

I attached a sample runnable project and added your TabStrip to PageViewTest.aspx removing the missing dependencies. Default1-3 are the pages loaded through the PageViews' ContentUrl properties. At my end it works correctly in Chrome and IE11 with Q1 2014 and the latest controls version. However, I see that you set CSS classes to the Tabs and PageViews and you haven't posted the related custom styles so I wouldn't know how they are affecting the PageView's content. So please modify the attached project, adding the custom styles if needed to reproduce the IE behavior, and post your modifications for further review.

Looking forward to your reply.

Regards,
Ivan Danchev
Telerik by Progress

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.

answered on 26 Aug 2016, 08:24 AM

Hello Ivan,

Thanks for your reply.

I cannot reproduce the problem with only an "extract" of the code base and it's a pretty big job to include all stuff from my real application.

Instead I was thinking if you could enter this live url and see the problem in action?

http://insightkunddemo5.insera.se

Reproduce by first clicking the "Analysis" tab, and then another one for instance "settings" and finally back to Analysis again.

Those steps works OK in Chrome but IE shows a blank white page the second time Analysis is clicked.

Looking forward to your response.

Regards
Tomas