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

Tabs in the tabstrip overflow content area in IE7

1 Answer 23 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Hilda
Top achievements
Rank 1
Hilda asked on 05 Jan 2011, 12:21 PM
Hi,

I have implemented an application where there is a main tabstrip with  tabs and in each of these tabs there are again tabs whose numbers vary between tabs(nested tabs).
  
I have implemented the same by rendering partial in each of the main tabs and again rendering content of the inner tabs as partials.

While debugging it works fine in chrome.

 But in IE7, there is a problem. When I go to a inner tab with more content(large partial) then to the smaller inner tabs(tabs containing lesser content), there is some extra borders and lines shown below these pages which does not exist in code.

The pseudo code for the same is as follows:

Outer tabstrip(main file):
 
<% Html.Telerik().TabStrip()
       .Name("TabStrip1")
        
       .Items(tabstrip =>
       {
           tabstrip.Add()
               .Text("Tab 1   >>")
               .Encoded(false)
               .Content(() =>
               {
                   Html.RenderPartial("Tab1");
               });
           tabstrip.Add()
               .Text("Tab 2    >>").Encoded(false)
               .Content(() =>
                     {
                         Html.RenderPartial("Tab2");
                     });
           ......
           tabstrip.Add()
                .Text("Tab 7   >>").Encoded(false)
                .Content(() =>
                      {
                          Html.RenderPartial("Tab7");
                      });
                  
       })
       .SelectedIndex(0)
       .ClientEvents(events => events
       .OnLoad(() =>
       {
           %>
            function(e) {
                 
             
            }
           <%
       }))
       .HtmlAttributes(new { style = "font-size: 1.10em;" })
       .Render();   
        %>
 
 
One of the inner tabstrip data( Tab1)
 
<% Html.Telerik().TabStrip()
       .Name("TabStrip2")
        
       .Items(tabstrip =>
       {
           tabstrip.Add()
               .Text("Tab 1 of Tab1")
               .Encoded(false)
               .Content(() =>
               {
                   Html.RenderPartial("Tab1Tab1");
               });
           tabstrip.Add()
               .Text("Tab 2  of Tab1").Encoded(false)
               .Content(() =>
                     {
                         Html.RenderPartial("Tab2Tab1");
                     });
           ......
           tabstrip.Add()
                .Text("Tab 10 of Tab1").Encoded(false)
                .Content(() =>
                      {
                          Html.RenderPartial("Tab10Tab1");
                      });
                  
       })
       .SelectedIndex(0)
       .ClientEvents(events => events
       .OnLoad(() =>
       {
           %>
            function(e) {
                 
             
            }
           <%
       }))
       .HtmlAttributes(new { style = "font-size: 1.10em;" })
       .Render();   
        %>


If the content in Tab1Tab1 is more than that in Tab2Tab1. If I first go to Tab1 of Tab1 and then to Tab2 of Tab1 extra lines and borders like that of the tables rendered in Tab1 of Tab1 is shown in Tab 2 of Tab1. Sorry if it was confusing. I have attached the extra content view as an image file.

Kindly Help

Thanks & Regards,
Hilda Fabiola Bernard

1 Answer, 1 is accepted

Sort by
0
Hilda
Top achievements
Rank 1
answered on 07 Jan 2011, 07:22 AM
Hi,

The error was rectified.. it was the problem with the css. Fixed it. Thank you

Regards,
Hilda Fabiola Bernard
Tags
General Discussions
Asked by
Hilda
Top achievements
Rank 1
Answers by
Hilda
Top achievements
Rank 1
Share this question
or