Telerik Forums / UI for ASP.NET AJAX Forum / TabStrip /

Design Problem on page with tabstrip after adding few user controls

Telerik UI for ASP.NET AJAX
Resources Buy Try

5 posts, 0 answers

Yuvika

36 posts

Member since:
Mar 2009

Posted 13 Jan 2010 Link to this post

Hi,

I have a problem adding user controls in tabs after an extent. After adding the 7 user controls on my tab strip I got a strange problem that my whole page design gets distorted. I have the following code:

    
             <telerik:RadTabStrip ID="RadTabStrip1" runat="server" MultiPageID="RadMultiPage1" 
        
                            SelectedIndex="0" Skin="Default" ShowBaseLine="False">  
        
                            <Tabs> 
        
                                <telerik:RadTab Text="Summary / General" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                    HoveredCssClass="HoveredTab">  
        
                                    <Tabs> 
        
                                        <telerik:RadTab Text="File Summary" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="File Summary by File Type" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="File Summary by Custodian" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Tagged File Summary by Custodian" SelectedCssClass="SelectedTab" 
        
                                            DisabledCssClass="DisabledTab" HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="File(s) not in Export Set" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                    </Tabs> 
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="Containers" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                    HoveredCssClass="HoveredTab">  
        
                                    <Tabs> 
        
                                        <telerik:RadTab Text=" Summary of Container Files" SelectedCssClass="SelectedTab" 
        
                                            DisabledCssClass="DisabledTab" HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Container File Details" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                    </Tabs> 
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="Files" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                    HoveredCssClass="HoveredTab">  
        
                                    <Tabs> 
        
                                        <telerik:RadTab Text="Top 25 File Types" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Office File Types" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="File Type Summary" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="File Author Summary" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Known System Files" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                    </Tabs> 
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="Duplicate Files" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                    HoveredCssClass="HoveredTab">  
        
                                    <Tabs> 
        
                                        <telerik:RadTab Text="Duplicates (Custodian)" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Duplicates (Global)" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Duplicate Files (Loose)" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Duplicate Emails" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                    </Tabs> 
        
                                </telerik:RadTab> 
        
                                <telerik:RadTab Text="Emails" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                    HoveredCssClass="HoveredTab">  
        
                                    <Tabs> 
        
                                        <telerik:RadTab Text="Email Summary" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Email Summary by Sender" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text=" Conversation Summary" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                        <telerik:RadTab Text="Attachment Summary" SelectedCssClass="SelectedTab" DisabledCssClass="DisabledTab" 
        
                                            HoveredCssClass="HoveredTab">  
        
                                        </telerik:RadTab> 
        
                                    </Tabs> 
        
                                </telerik:RadTab> 
        
                            </Tabs> 
        
                        </telerik:RadTabStrip> 
        
            <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Width="100%">  
        
                            <telerik:RadPageView ID="RadPageView1" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView2" runat="server">  
        
                                <uc1:ucFileDetails ID="ucFileDetails1" runat="server" /> 
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView3" runat="server">  
        
                                <uc2:ucFileManifestBatch ID="ucFileManifestBatch1" runat="server" /> 
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView4" runat="server">  
        
                                <uc3:ucCustodianDetails ID="ucCustodianDetails1" runat="server" /> 
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView5" runat="server">  
        
                                <uc4:ucProductionSetFiles ID="ucProductionSetFiles1" runat="server" /> 
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView6" runat="server">  
        
                                <uc5:ucFileListTaggedButNotInProductionSet ID="ucFileListTaggedButNotInProductionSet1" 
        
                                    runat="server" /> 
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView7" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView8" runat="server">  
        
                                <uc7:ucContainerFileSummary ID="ucContainerFileSummary1" runat="server" /> 
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView9" runat="server">  
        
                               <%-- <uc9:ucContainerFileDetails ID="ucContainerFileDetails1" runat="server" />--%> 
        
                               Container Detail Report  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView10" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView11" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView12" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView13" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView14" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView15" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView16" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView17" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView18" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView19" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView20" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView21" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView22" runat="server">  
        
                                <uc6:ucFrequencyInProject ID="ucFrequencyInProject1" runat="server" /> 
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView23" runat="server">  
        
                                <uc8:ucFrequencyByEmailAddress ID="ucFrequencyByEmailAddress1" runat="server" /> 
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView24" runat="server">  
        
                            </telerik:RadPageView> 
        
                            <telerik:RadPageView ID="RadPageView25" runat="server">  
        
                            </telerik:RadPageView> 
        
                        </telerik:RadMultiPage>

If I uncomment the commented user control the design of page is something like errorpage.jpg image. And if I comment the code or any other user control from the tab strip it works perfectly ok as in correctpage.jpg.
Please review the code and let me know what could be the problem?

Thanks,
Yuvika

Kamen Bundev
Admin

1532 posts

Posted 13 Jan 2010 Link to this post

Hello Yuvika,

If you use themes and if you have many different controls, you may have hit the 31 CSS links/imports per file limit in IE, causing some of your CSS files to fail to load. Fortunately the limit is per file meaning that you can move all your CSS files out of the theme folder and put them somewhere else, then create two CSS files in your theme folder and load all the external CSS files with @import declarations and relative paths thus working around the IE limitation. Let me know if this helps.

All the best,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Yuvika

36 posts

Member since:
Mar 2009

Posted 13 Jan 2010 Link to this post

Hi Kamen Bundev,

Yes it is working as expected in mozilla and the only problem is in IE.
I dont have any themes downloaded in my project of telerik. And I have telerik report viewer on each user control of each tab. So please suggest how can I resolve it.Shall I download all css's in my project and keep it in themes folder or should I create 1 user control and pass the report object to it through delegates?.

Thanks,
Yuvika
Kamen Bundev
Admin

1532 posts

Posted 19 Jan 2010 Link to this post

Hello Yuvika,

Can you send me a Save as Web Page Complete from Firefox or point me to a live URL of your application (you can submit it as General Feedback if you prefer the privacy), so I can check what exactly is going on there. Thank you in advance.

Regards,
Kamen Bundev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Yuvika

36 posts

Member since:
Mar 2009

Posted 19 Jan 2010 Link to this post

Hi Kamen Bundev,

We have resolved our issue by having 1 report viewer and updating it using delegates.
Actually what was happening in our case was tht we had a report viewer on each user control in each tab pane. So there were a lot of css being loaded, as per the help provided by you in the above post, We got to know the root of the problem.

Thus we made a report viewer a user contol and placed it on default page and this is being updated to show each report from tab, using delegate's.
Hope it helps somebody else. And thanks for you help too.

Thanks,
Yuvika

Design Problem on page with tabstrip after adding few user controls

Yuvika

Kamen Bundev

Yuvika

Kamen Bundev

Yuvika