I am Using material design scroll tabs. Dynamically adding tabs with jquery doesn't work properly. The problem is when tabs are added more than the screen width arrow navigation don't come without resizing the screen.
i know why the tab change is not working. but please help me with navigation
var countLi = 0;
var add = function(){
$('#tabTitle .is-active').removeClass('is-active');
$('#tabContent .is-active').removeClass('is-active');
countLi = countLi+1;
var a = $('<a href="#'+countLi+'" class="mdl-layout__tab is-active">Tab 2</a>');
var tabTitle = $('#tabTitle');
var tabContent = $('#tabContent')
a.appendTo(tabTitle);
newSec = $('<section class="mdl-layout__tab-panel is-active" id="'+countLi+'"></section>');
newDiv = $('<div class="page-content"></div>');
data = "<form></form>"; //loaded from ajax request
debugger;
newDiv.html(data);
newDiv.appendTo(newSec);
newSec.appendTo(tabContent);
}<html>
<head>
<!-- Material Design Lite -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<!-- Material Design icon font -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<!-- Simple header with scrollable tabs. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect" id="tabTitle">
<a href="#scroll-tab-6" class="mdl-layout__tab is-active">Tab 6</a>
</div>
</header>
<main class="mdl-layout__content" id="tabContent">
</section>
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-6">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>
<button onclick="add()" type="button">add</button>
</div>
</body>
</html>
