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 52 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Tompa
Top achievements
Rank 1
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

Sort by
0
Ivan Danchev
Telerik team
answered on 25 Aug 2016, 12:16 PM
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.
0
Tompa
Top achievements
Rank 1
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

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

0
Ivan Danchev
Telerik team
answered on 29 Aug 2016, 08:57 AM
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
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
TabStrip
Asked by
Tompa
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Tompa
Top achievements
Rank 1
Share this question
or