Tabcontent only visible first time in Internet Explorer 10/11

[Tompa]

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>

[Ivan Danchev]

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

[Tompa]

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

Login with telerik/telerik.

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

[Ivan Danchev]

Hello Tomas,

We checked the live url and and it seems the behavior you are experiencing is related to the use of frameset in IE. Clearing the "fraSetRoot" frameset's rows value showed its content: screenshot. We would suggest checking out this and other threads in stackoverflow, which discusses a similar problem with the use of framesets in IE.

Regards,
Ivan Danchev
Telerik by Progress