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

First tab in TabStrip does not format correctly

1 Answer 57 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

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

First tab in TabStrip does not format correctly

1 Answer, 1 is accepted