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

tabStrip in detail template doesn't render correctly with default theme in IE11

6 Answers 43 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Oscar
Top achievements
Rank 1
Oscar asked on 14 May 2014, 01:26 PM
Hi Kendo Team,
I'm using something similiar to your Grid /Detail template example and it turns out that that tabstrip is showing a border-bottom line below the active tab.
To reproduce this, follow these steps:
1. Open your sample Grid / Detail template
2. Change the theme to Default
3. collapse/expand the theme dropdown.
I've attached a picture that shows this effect.

You can also check this in your tabStrip samples. Collapse and expand the theme dropdown.

Kind regards,
Oscar.

6 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 14 May 2014, 03:50 PM
Hi Oscar,


This is a browser specific behavior in Internet Explorer that is called sub-pixel rendering - a font smoothing functionality that sometimes leaves some unexpected results like the current one. As a workaround you could set some really small top margin for the grid.
E.g.
#grid
{
    margin-top: 0.5px;
}

I hope this information helps. I wish you a great day!

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Oscar
Top achievements
Rank 1
answered on 15 May 2014, 09:41 AM
Hi Dimiter,
Thank you for the information.
Your tabstrip sample also has the same behavior. I've attached a picture.
How can I fix this?

Kind regards.
0
Dimiter Madjarov
Telerik team
answered on 15 May 2014, 10:07 AM
Hello Oscar,


As stated previously this is a browser specific behavior that is reproducible rather randomly. Additional information could be found on the internet e.g. here and here. If the issue is reproducing on your side, I would suggest applying some small margin in order to re-position the TabStrip widget.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Oscar
Top achievements
Rank 1
answered on 15 May 2014, 10:25 AM
I hope this helps someone. Adding these lines to your css file solves the problem:

​.k-tabstrip-items .k-item.k-state-active {
margin-top: 0.6px;
}
Kind regards.
Oscar.
0
Oscar
Top achievements
Rank 1
answered on 16 May 2014, 03:38 PM
Excuse me,
As I said in may previous post, applying a margin-top does not fix the problem, actually.
The line under the active tabstrip ítem keeps on being shown randomly.
Kind regards.
 
0
Dimiter Madjarov
Telerik team
answered on 19 May 2014, 10:27 AM
Hello Oscar,


Indeed this browser specific issue in Internet Explorer is randomly reproducible. This is what I tried to state in my previous posts and provided links on the topic. There is no reliable workaround that we could suggest as the problem is not specifically Kendo UI related.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Oscar
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Oscar
Top achievements
Rank 1
Share this question
or