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

RadTab with Close - IE6 rendering issue

4 Answers 71 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Bogdan
Top achievements
Rank 1
Bogdan asked on 14 Sep 2010, 04:34 PM
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; 
}

 

 

 

 

 

 

 

 

 

4 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 17 Sep 2010, 11:23 AM
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
0
Bogdan
Top achievements
Rank 1
answered on 17 Sep 2010, 02:05 PM
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 !


0
Kamen Bundev
Telerik team
answered on 17 Sep 2010, 05:20 PM
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
0
vivek
Top achievements
Rank 1
answered on 18 Mar 2011, 07:32 AM
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,
Tags
TabStrip
Asked by
Bogdan
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Bogdan
Top achievements
Rank 1
vivek
Top achievements
Rank 1
Share this question
or