If you have a Tabstrip with "tabPosition: Left" or "tabPosition: Right", and then you next a TabStrip inside it with "tabPosition: Top" or "tabPosition: Bottom", it appears to apply some of the styling/position from the parent left/right positioning, breaking the TabStrip, places the tabs one above the other in an incorrect position.
Hopefull this link will work, if not you'll have to paste the code below into a new Dojo: http://dojo.telerik.com/eWiHa
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/tabstrip/tab-position">
<style>html { font-size: 12px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.blueopal.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.408/styles/kendo.dataviz.blueopal.min.css" />
<script src="http://cdn.kendostatic.com/2015.1.408/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.408/js/kendo.all.min.js"></script>
</head>
<body>
<div class="demo-section k-header">
<div id="tabstrip-A">
<ul>
<li class="k-state-active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div><p>A</p></div>
<div><p>B</p></div>
<div>
<div id="tabstrip-B">
<ul>
<li class="k-state-active">One</li>
<li>Two</li>
<li>Three</li>
</ul>
<div><p>A</p></div>
<div><p>B</p></div>
<div><p>C</p></div>
</div>
</div>
</div>
</div>
<style>
.demo-section { width: 600px; }
.demo-section * + h4 { margin-top: 2em; }
.demo-section .k-tabstrip .k-content { height: 140px; }
</style>
<script>
$(document).ready(function () {
$("#tabstrip-A").kendoTabStrip({ tabPosition: "right" });
$("#tabstrip-B").kendoTabStrip({ tabPosition: "bottom" });
});
</script>
</body>
</html>
7 Answers, 1 is accepted
Rank 2
It's because Display: Block is Cascading down from .k-tapstrip-left / .k-tapstrip-right to the LI's, along with the FLoat coming down to the UL.
You can over-ride it in this case with:
- #tabstrip-B>UL {float:left;}
- #tabstrip-B>UL>LI { display: inline-block;}
Kind Regards,
Nathan
Nathan Hobbs
Computer Programmer
Microsoft Certified Professional
Cascade3d
www.cascade3d.com
Rank 2
Actually should be:
- #tabstrip-B>UL {float:none;}
- #tabstrip-B>UL>LI { display: inline-block;}
If only fixes for bottom... for "top" the tab border formatting is still screwed up.
Kind Regards,
Nathan
Nathan Hobbs
Computer Programmer
Microsoft Certified Professional
Cascade3d
www.cascade3d.com
Thank you for the details. We were able to reproduce the issue and logged it in our open-source repository. You can keep track on the progress here:
https://github.com/telerik/kendo-ui-core/issues/755.
We also came up with a workaround that you can use until the fix is ready.
Regards,
Atanas Georgiev
Telerik
Rank 2
Yes - you are right. It is the same fix and it is not applicable for "top" position. However, the issue is already fixed and it will be available for download with out next Service Pack due by the end of the week.
Regards,
Atanas Georgiev
Telerik
Rank 1
This is still messed up
http://dojo.telerik.com/eqUFE
When you do a left and then top it messes up
Please see the sample
The provided example uses an outdated version of Kendo UI - updating it to the latest official release (v2016.2.714) seems to fix the problem. For your convenience below is the updated example:
http://dojo.telerik.com/@Iliana/UxuFO
Regards,
Iliana Nikolova
Telerik by Progress