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

RadTab with Close - IE6 rendering issue

4 Answers 94 Views

TabStrip

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

Bogdan asked on 14 Sep 2010, 04:34 PM

uisample.JPG

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

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

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 !

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

answered on 18 Mar 2011, 07:32 AM

tabss.GIF

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,