JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>
<a class="k-button" id="toggleBtn" href="#">Toggle .k-content class on window content div</a>
<div id="forecast">
<div id="tabstrip">
<ul>
<li class="k-state-active">Paris</li>
<li>New York</li>
</ul>
<div>
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Paris.</p>
</div>
<div>
<h2>29<span>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
</div>
<div id="window">
<div id="positioned-content">Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 402Artek Alvar Aalto - Armchair 40</div>
</div>
CSS
#tabstrip {
position: absolute;
top: 50px;
left: 25px;
height: 600px;
width: 900px;
overflow: auto;
}
#positioned-content {
position: absolute;
top: 25px;
left: 25px;
}
JavaScript
/*
Appending the window to a tab in order to have the window hide when that tab is not active (not interested in handling this through js code)
When the window's content div is appended to a tabstrip it suddenly matches additonal kendo styling rules that are specified with this CSS selector:
".k-tabstrip .k-content, .k-panelbar .k-tabstrip .k-content"
If I remove the .k-content class from the window content div, it renders like I'd expect it to.
Is there a more appropriate way of achieving the same result?
*/
$("#tabstrip").kendoTabStrip();
$("#window").kendoWindow({
appendTo: '#tabstrip-1',
width: "600px",
height: "500px",
title: "About Alvar Aalto"
});
$(".k-window").css({
position: 'absolute',
left: 100,
top: 100
});
$("#toggleBtn").click(function () {
$("#window").toggleClass("k-content");
});