I have two tabs in my TabStrip but vertical scrollbar is not appearing in the TabStrip, below is the code i am using to create TabStrip
<div id="tabstrip">
<ul>
<li class="k-state-active">Search in Flow Library </li>
<li>Search by FA/LSR# </li>
</ul>
<div>
<div style="width: 100%; height: 22px;" class="panelHeader">
<b>Search Flow Libraries</b>
</div>
<table width="100%" id="tabbed">
<tr>
<td align="right">
Flow Name:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtFlowName" class="k-textbox" />
</td>
<td align="right">
Creator:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtCreator" class="k-textbox" />
</td>
</tr>
<tr>
<td align="right">
Generic:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtGeneric" class="k-textbox" />
</td>
<td align="right">
Model:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtModel" class="k-textbox" />
</td>
</tr>
<tr>
<td align="right">
Customer Parent:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtCustParent" class="k-textbox" />
</td>
<td align="right">
Customer Account Name:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtCustACName" class="k-textbox" />
</td>
</tr>
<tr>
<td colspan="4">
<hr />
</td>
</tr>
<tr>
<td colspan="3">
<button class="k-button" id="btnMyFlowLib">
My Flow Libraries</button>
</td>
<td align="right">
<button class="k-button" id="btnSearch">
Search</button>
<button class="k-button" id="btnReset">
Reset</button>
</td>
</tr>
</table>
<div style="width: 100%; height: 22px;" class="panelHeader">
<b>Results/My Flow Libraries</b>
</div>
<div style="float: right">
<button class="k-button" id="btnImport">
Import</button></div>
<br />
<div>
<table id="grid">
<thead>
<tr>
<th data-field="rank">
Flow Name
</th>
<th data-field="rating">
Description
</th>
<th data-field="title">
Generic
</th>
<th data-field="year">
Model
</th>
<th data-field="year">
Creator
</th>
<th data-field="year">
Source
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Deepak's Flow
</td>
<td>
This for testing
</td>
<td>
adxl678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Amit's Flow
</td>
<td>
This for testing
</td>
<td>
adxl678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Vijay's Flow
</td>
<td>
This for testing
</td>
<td>
adxl678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Sandeep's Flow
</td>
<td>
This for testing
</td>
<td>
ADXL678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
height: 180
});
});
</script>
</div>
</div>
<div>
<div style="width: 100%; height: 22px;" class="panelHeader">
<b>Search FA/LS</b>
</div>
<table width="100%">
<tr>
<td align="right">
Request Number:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtReqNum" class="k-textbox" />
</td>
<td align="right">
Serial Number:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtSerialNum" class="k-textbox" />
</td>
</tr>
<tr>
<td colspan="4">
<hr />
</td>
</tr>
<tr>
<td colspan="4" align="right">
<button class="k-button" id="txtSearch">
Search</button>
<button class="k-button" id="txtReset">
Reset</button>
</td>
</tr>
</table>
<div style="width: 100%; height: 22px;" class="panelHeader">
<b>Results/My Flow Libraries</b>
</div>
<div style="float: right; padding-top: -10px">
<button class="k-button" id="btnImport1">
Import</button></div>
<br />
<div>
<table id="grid1">
<thead>
<tr>
<th data-field="rank">
Flow Name
</th>
<th data-field="rating">
Description
</th>
<th data-field="title">
Generic
</th>
<th data-field="year">
Model
</th>
<th data-field="year">
Creator
</th>
<th data-field="year">
Source
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Deepak's Flow
</td>
<td>
The Shawshank Redemption9.2
</td>
<td>
adxl678>
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Amit's Flow
</td>
<td>
The Shawshank Redemption9.2
</td>
<td>
adxl678>
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Vijay's Flow
</td>
<td>
The Shawshank Redemption9.2
</td>
<td>
adxl678>
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Sandeep's Flow
</td>
<td>
The Shawshank Redemption9.2
</td>
<td>
ADXL678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$("#grid1").kendoGrid({
height: 180
});
});
</script>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
animation: false
});
var window = $("#window").kendoWindow({
height: "70%",
modal: true,
visible: false,
iframe: true,
draggable: false,
content: "../Pages/LoadWorkflow.aspx",
title: "Load Saved Workflow",
width: "70%"
}).data("kendoWindow");
});
</script>
<div id="tabstrip">
<ul>
<li class="k-state-active">Search in Flow Library </li>
<li>Search by FA/LSR# </li>
</ul>
<div>
<div style="width: 100%; height: 22px;" class="panelHeader">
<b>Search Flow Libraries</b>
</div>
<table width="100%" id="tabbed">
<tr>
<td align="right">
Flow Name:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtFlowName" class="k-textbox" />
</td>
<td align="right">
Creator:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtCreator" class="k-textbox" />
</td>
</tr>
<tr>
<td align="right">
Generic:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtGeneric" class="k-textbox" />
</td>
<td align="right">
Model:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtModel" class="k-textbox" />
</td>
</tr>
<tr>
<td align="right">
Customer Parent:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtCustParent" class="k-textbox" />
</td>
<td align="right">
Customer Account Name:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtCustACName" class="k-textbox" />
</td>
</tr>
<tr>
<td colspan="4">
<hr />
</td>
</tr>
<tr>
<td colspan="3">
<button class="k-button" id="btnMyFlowLib">
My Flow Libraries</button>
</td>
<td align="right">
<button class="k-button" id="btnSearch">
Search</button>
<button class="k-button" id="btnReset">
Reset</button>
</td>
</tr>
</table>
<div style="width: 100%; height: 22px;" class="panelHeader">
<b>Results/My Flow Libraries</b>
</div>
<div style="float: right">
<button class="k-button" id="btnImport">
Import</button></div>
<br />
<div>
<table id="grid">
<thead>
<tr>
<th data-field="rank">
Flow Name
</th>
<th data-field="rating">
Description
</th>
<th data-field="title">
Generic
</th>
<th data-field="year">
Model
</th>
<th data-field="year">
Creator
</th>
<th data-field="year">
Source
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Deepak's Flow
</td>
<td>
This for testing
</td>
<td>
adxl678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Amit's Flow
</td>
<td>
This for testing
</td>
<td>
adxl678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Vijay's Flow
</td>
<td>
This for testing
</td>
<td>
adxl678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Sandeep's Flow
</td>
<td>
This for testing
</td>
<td>
ADXL678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
height: 180
});
});
</script>
</div>
</div>
<div>
<div style="width: 100%; height: 22px;" class="panelHeader">
<b>Search FA/LS</b>
</div>
<table width="100%">
<tr>
<td align="right">
Request Number:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtReqNum" class="k-textbox" />
</td>
<td align="right">
Serial Number:
</td>
<td style="padding-left: 10px">
<input type="text" id="txtSerialNum" class="k-textbox" />
</td>
</tr>
<tr>
<td colspan="4">
<hr />
</td>
</tr>
<tr>
<td colspan="4" align="right">
<button class="k-button" id="txtSearch">
Search</button>
<button class="k-button" id="txtReset">
Reset</button>
</td>
</tr>
</table>
<div style="width: 100%; height: 22px;" class="panelHeader">
<b>Results/My Flow Libraries</b>
</div>
<div style="float: right; padding-top: -10px">
<button class="k-button" id="btnImport1">
Import</button></div>
<br />
<div>
<table id="grid1">
<thead>
<tr>
<th data-field="rank">
Flow Name
</th>
<th data-field="rating">
Description
</th>
<th data-field="title">
Generic
</th>
<th data-field="year">
Model
</th>
<th data-field="year">
Creator
</th>
<th data-field="year">
Source
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Deepak's Flow
</td>
<td>
The Shawshank Redemption9.2
</td>
<td>
adxl678>
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Amit's Flow
</td>
<td>
The Shawshank Redemption9.2
</td>
<td>
adxl678>
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Vijay's Flow
</td>
<td>
The Shawshank Redemption9.2
</td>
<td>
adxl678>
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
<tr>
<td>
Sandeep's Flow
</td>
<td>
The Shawshank Redemption9.2
</td>
<td>
ADXL678
</td>
<td>
ADXL
</td>
<td>
dbeshoyi
</td>
<td>
Not Sure
</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$("#grid1").kendoGrid({
height: 180
});
});
</script>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#tabstrip").kendoTabStrip({
animation: false
});
var window = $("#window").kendoWindow({
height: "70%",
modal: true,
visible: false,
iframe: true,
draggable: false,
content: "../Pages/LoadWorkflow.aspx",
title: "Load Saved Workflow",
width: "70%"
}).data("kendoWindow");
});
</script>