First tab in TabStrip does not format correctly

2 posts, 0 answers
  1. Dan
    Dan avatar
    16 posts
    Member since:
    Aug 2014

    Posted 02 Sep 2014 Link to this post

    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>
                        </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>
                        </div>
    </form>
                </div>
            </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
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 03 Sep 2014 Link to this post

    Hi Dan,

    I tried to reproduce the issue but to no avail (example). Could you please check if there are some errors in the browser console? Also does the issue occur in all major browsers?

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top