RadTab with Close - IE6 rendering issue

5 posts, 0 answers
  1. Bogdan
    Bogdan avatar
    2 posts
    Member since:
    Sep 2010

    Posted 14 Sep 2010 Link to this post

    I am trying to use a RadTabStrip control with a Close button on every tab. The Close button is created using TabTemplates.

    Everything works fine, with the exception of IE6, where even though I use the styles provided in the Telerik example for the IE6 to fix the line-height bug,  it still does not render properly. The bottom of the tabs is slightlly missaligned.  

    I have included a screen shot of the problem (UISample.JPG). Also, bellow I listed the sample aspx code and the css I am using.

    I have tried to play with the css style, but I did not manage to get it to work properly. Does anybody have a solution for this ?

    Thanks a lot for the help !


    This is the aspx code:

     

     

     

    <head runat="server">   
    <title>Untitled</title
    <link rel="stylesheet" type="text/css" href="styles.css" /> 
    </head>
    <body>
    <form id="mainForm" runat="server">
     <telerik:RadScriptManager runat=server ID="ScriptManager"></telerik:RadScriptManager
     <div
      <telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="0" Skin="Vista" ScrollChildren="true" ScrollButtonsPosition="Middle" Orientation="HorizontalTop"
      <TabTemplate
       <div class="textWrapper"
        <%# DataBinder.Eval(Container, "Text") %> 
       </div
       <span class="ie6shim"></span
       <img src="Images/Close.gif" alt="Close" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" /> 
      <TabTemplate
    <Tabs
     <telerik:RadTab runat="server" Selected="True" Text="Tab1"></telerik:RadTab
     <telerik:RadTab runat="server" Text="Tab2"></telerik:RadTab
     <telerik:RadTab runat="server" Text="Tab3"></telerik:RadTab
    </Tabs
    </telerik:RadTabStrip
    </div
    </form
    </body>
      
      
      
    This is the styles.css file:
       
      
    .tabStrip
     position:absolute; 
     top:0; 
    }
      
    .rtsIn img 
     vertical-align:middle; 
     width: 14px; 
     height: 14px; 
     margin-left: 10px; 
    }
      
      
    .rtsIn .textWrapper 
     display: inline; 
    }
       
      
    /* IE6 fixes for line-height bug */
      
    * html .rtsIn img 
     margin-bottom: 10px; 
    }
      
    * html .rtsIn .textWrapper 
     float: left; 
     height:26px; 
    }
      
    * html .rtsIn .ie6shim 
     height: 26px; 
     display: inline-block; 
    }

     

     

     

     

     

     

     

     

     

  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Sep 2010 Link to this post

    Hi Bogdan,

    Change your IE6 fix CSS like this:
    /* IE6 fixes for line-height bug */
    * html .rtsIn img
    {
        margin-bottom: 5px;
    }
    * html .rtsIn .textWrapper
    {
        float: left;
        height:24px;
    }
    * html .rtsIn .ie6shim
    {
        height: 24px;
        display: inline-block;
    }


    Greetings,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Bogdan
    Bogdan avatar
    2 posts
    Member since:
    Sep 2010

    Posted 17 Sep 2010 Link to this post

    Hi Kamen,

    Thank you so much for your solution. Works beautifully now :-).

    The other thing that I noticed yesterday, was that under IE6, when you hoover over a tab, the tab does not change color (it works in all other browsers I tested though, it's just IE6 that is different). Even on the Telerik examples you can test this behaviour if you load the page in different browsers: http://demos.telerik.com/aspnet-ajax/tabstrip/examples/applicationscenarios/deletetabs/defaultcs.aspx

    Any idea how I can fix this ?

    Thanks again for your help !


  4. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 17 Sep 2010 Link to this post

    Hello Bogdan,

    The problem is that the close buttons are implemented through tab templates which are DIV elements contrary to the original rendering with anchors. In IE6 :hover pseudo selectors do not work with anything else other than anchors, hence the problem. You can work around this using javascript to bind mouseover and mouseout event handlers and implement hovers by hand.

    Kind regards,
    Kamen Bundev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. vivek
    vivek avatar
    24 posts
    Member since:
    Oct 2010

    Posted 18 Mar 2011 Link to this post

    Hi Kamen.

    I tried the same approach to delete the Tabs. The problem with me is i didnt see the Text on the TABs only. I can see the delete Images only on the TABs.Because of this problem, i am also not getting the Text value parameter in JavaScript. Also attaching you the attached image of TAbs
    JavaScript Code:
    function deleteTab(tabText)
    {
    var tabStrip = document.getElementById("RadTabStrip1")
    var multiPage = document.getElementById("RadMultiPage1")
         var tab = tabStrip.findTabByText(tabText);
       var pageView = tab.get_pageView();
      
       var tabToSelect = tab.get_nextTab();
       if (!tabToSelect)
           tabToSelect = tab.get_previousTab();
          
       tabStrip.get_tabs().remove(tab);
       multiPage.get_pageViews().remove(pageView);
      
       if (tabToSelect)
          tabToSelect.set_selected(true);
    }
      
      
    <aspx Code below:>
      
    <telerik:RadTabStrip ID="RadTabStrip1" runat="server" Skin="Outlook" MultiPageID="RadMultiPage1"
                                SelectedIndex="0" OnClientTabSelecting="OnClientTabSelecting" ScrollButtonsPosition="Middle" Orientation="HorizontalTop">
                                
                                  
                                <Tabs>
                                    <telerik:RadTab Text="AA">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="BB">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="CC">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="DD">
                                    </telerik:RadTab>
                                    <telerik:RadTab Text="EE">
                                    </telerik:RadTab>
                                </Tabs>
                                  
                               <TabTemplate>
                               <div class="textWrapper">  
                                <%# DataBinder.Eval(Container, "Text") %> 
                                </div>  
                                <span class="ie6shim"></span
                                <img src="Images/delete.gif" alt="Close" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" /> 
                               </TabTemplate>
                                 
                            </telerik:RadTabStrip>
      
    CSS CODE:
    .rtsIn .textWrapper  
    {  
     display: inline;  
    }
    /* IE6 fixes for line-height bug */
    * html .rtsIn img
    {
        margin-bottom: 5px;
    }
    * html .rtsIn .textWrapper
    {
        float: left;
        height:24px;
    }
    * html .rtsIn .ie6shim
    {
        height: 24px;
        display: inline-block;
    }
     Please help me to solve this problem .

    Thanks in Advance,
Back to Top