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

First tab in TabStrip does not format correctly

1 Answer 106 Views

TabStrip

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

Dan asked on 02 Sep 2014, 10:53 PM

firsttab.png

secondtab.png

I am using the TabStrip in a web application. The first tab in the tabstrip does not format correctly -- it is outside the tab "div". However, the second tab works correctly.

First tab is in screenshot "firstTab.png" and Second tab is in "secondTab.png"

As shown below, the code is exactly the same in each div tag for each tab that appears.

Here is my page/code I am using:

<html>

<head>

<script src="kendo/js/jquery.min.js"></script>

<script src="kendo/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="kendo/css/bootstrap-theme.min.css"

type="text/css">

<link rel="stylesheet" href="kendo/css/bootstrap.min.css" type="text/css">

<link rel="stylesheet" href="kendo/css/kendo.bootstrap.min.css"

type="text/css">

<link rel="stylesheet" href="kendo/css/kendo.bootstrap.mobile.min.css"

type="text/css">

<link rel="stylesheet"

href="kendo/css/kendo.common-bootstrap.core.min.css" type="text/css">

<link rel="stylesheet" href="kendo/css/kendo.common-bootstrap.min.css"

type="text/css">

<link rel="stylesheet" href="kendo/css/kendo.common.core.min.css"

type="text/css">

<link rel="stylesheet" href="kendo/css/kendo.common.min.css"

type="text/css">

<link rel="stylesheet" href="kendo/css/kendo.default.min.css"

type="text/css">

<link rel="stylesheet" href="kendo/css/kendo.default.mobile.min.css"

type="text/css">

<link rel="stylesheet" href="css/clip.css" type="text/css">

<title>Proposal</title>

<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">

</head>

<body>

<div id="main-content">

<div id="mainTable">

<ul>

<li>General Information</li>

<li>Customer</li>

</ul>

<div id="generalTab">

<form class="form-horizontal" role="form">

<div class="form-group">

<label class="col-sm-2 control-label">Bid Manager</label>

<div class="col-sm-6">

<input type="text" name="bidMan" class="form-control"

placeholder="Enter Bid Manager..." required

data-required-msg="Bid Manager is required."

data-bind="value: bidMan"></input>

</div>

</form>

</div>

<div id="customerTab">

<form class="form-horizontal" role="form">

<div class="form-group">

<label class="col-sm-2 control-label">Bid Manager</label>

<div class="col-sm-6">

<input type="text" name="bidMan" class="form-control"

placeholder="Enter Bid Manager..." required

data-required-msg="Bid Manager is required."

data-bind="value: bidMan"></input>

</div>

</form>

</div>

<script>

$(document).ready(function() {

// Selects first tab of tabStrip...

var mainTable = $("#mainTable").kendoTabStrip().data("kendoTabStrip");

mainTable.select(0);

});

</script>

</div>

</body>

</html>

Please let me know what I may have missed in this formatting.

Thanks!
Dan

First tab in TabStrip does not format correctly

1 Answer, 1 is accepted