tabs Issue scroll

by Kiran Duggal

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="dash-board-text-container">
    <div class="pull-left-db-nav-tabs pull-left border">
        <ul class=" db-nav-tabs" id="tabs">
            <!-- style="overflow: hidden; height: 40px;" -->
            <li class="active"> <a data-toggle="tab" href="#dashboard-content">tab 1
                    <i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i>
                    <i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" ></i>
                </a>

                <!-- <span class="db-nav-tab-icons-hidden">
                            <i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" ></i>
                </span> -->
            </li>
            <li class=""> <a data-toggle="tab" href="#overview-content">tab 2
                    <i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both"></i>
                    <i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" ></i>
               </a>

            </li>
            <li class=""> <a data-toggle="tab" href="#overview-content">tab 3
                    <i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both"></i>
                    <i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" ></i>
               </a>

            </li>
            <li class=""> <a data-toggle="tab" href="#overview-content">tab 4
                    <i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both"></i>
                    <i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" ></i>
               </a>

           ...

CSS

.pull-left-db-nav-tabs {

    max-width: calc(100% - 60px);

    overflow: hidden;


}


.pull-right-db-nav-tabs-ul {
   

    right:0px !important;


    left: initial;


}


.pull-left-db-nav-tabs ul {
 background: pink;

    float:left;


    overflow:hidden;


    white-space: nowrap;


}


.pull-left-db-nav-tabs li {


    display:inline-block;


    list-style:none;


}


.pull-left-db-nav-tabs {


    max-width: calc(100% - 60px);


    overflow: hidden;


}


.pull-left-db-nav-tabs ul {


    float:left;


    overflow:hidden;


    white-space: nowrap;


}


.pull-left-db-nav-tabs li {


    display:inline-block;


    list-style:none;


}


.db-nav-tabs {


    border-bottom: none !important;


    padding-left: 14px !important;


    min-height: 36px;


    padding-right: 10px;


}


.db-nav-tabs li {


    /*    min-width: 150px;
    margin-top: 12px;*/


}


.db-nav-tabs>li>a {


    color: #959595;


    display: inline-flex !important;


}


.db-nav-tabs>li>a>i {


    padding-left: 13px;


}


.db-nav-tabs>li>a:hover {


    color: #333;


    text-decoration: none !important;


}

JavaScript

chkPlusIcon();

 function chkPlusIcon() {
     setTimeout(function () {
         var pageWidth = $(".pull-left-db-nav-tabs").width();
         var lastElementLi = $(".db-nav-tabs");
         var elementWidth = $(lastElementLi).width();
         var elementLeft = $(lastElementLi).position().left;

         $('.pull-right-db-nav-tabs-ul').empty();
         if (pageWidth - (elementWidth + elementLeft) < 0) {
             console.log("overflow!");
             $('.pull-right-db-nav-tabs').css('display', 'block');
             if ($('.pull-right-db-nav-tabs-ul li') >= 1) {} else {
                 $('.db-nav-tabs > li').clone().appendTo('.pull-right-db-nav-tabs-ul');
             } /*  $('.add-tab-last').css('display','none');*/

         } else {
             console.log("doesn't overflow");
             $('.pull-right-db-nav-tabs').css('display', 'none');
             $('.pull-right-db-nav-tabs-ul').empty();

         }
     }, 500);
 }
 $(window).resize(function () {
     chkPlusIcon();
 });


 //  add New tabs


 var tabCount = 9;
 //$('.db-add-new-tab').click(function (e) {
 $(document).on('click', '.db-add-new-tab', function (e) {
     console.log('add tab button clicked');
     chkPlusIcon();
     tabCount++;
     var nextTab = tabCount;
     var addTabLast = $('.db-nav-tabs li.add-tab-last');
     var addTabLastDropDown = $('.pull-right-db-nav-tabs-u li.add-tab-last');
     // create the tab
     $('<li class=""><a href="#tab' + nextTab + '" data-toggle="tab">tab ' + nextTab + '<i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i><i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" > </i> </a> </li> ').insertBefore(addTabLast);
     $('<li class=""><a href="#tab' + nextTab + '" data-toggle="tab">tab ' + nextTab + '<i class="glyphicon  glyphicon-edit db-edit-tab glyphiconColor db-nav-tab-icons-both " ></i><i class="glyphicon glyphicon-trash db-del-tab glyphiconColor db-nav-tab-icons-both" >...