When I use more then 4 tabs (0-4), the rightmost tab4 disappears, when the navigation bar pops up, during enlarging screen.
I have searched on the web for same issue, but could not found any.
This is the first time, that I'm using TABS with a navigation menu. I have posted the code here. Please can someone help me to solve this issue?
<!doctype html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<header class="main-page">
<div class="navbar-fixed">
<nav class="indigo lighten-2">
<div class="nav-wrapper">
<ul>
<!-- Only needed in record form -->
<li><a href="#" id="btnBack" onclick="HAS_Back()"><i class="white-text small material-icons">arrow_back</i></a></li>
</ul>
<!-- Put a "hamburger" menu when the web page gets too narrow -->
<a href="#" id="mainmenu" data-target="slide-out" class="sidenav-trigger"><i class="small material-icons">menu</i></a>
<!-- This attribute will be filled in the initPage() of each called page -->
<a href="#!" id="selectedmenu" class="brand-logo center">Selected Menu</a>
<ul style="heigth:40px;" class="right">
<!-- The specific page has to remove the not needed button -->
<li><a href="#" ><i class="white-text small material-icons">refresh</i></a></li>
<li><a href="#" ><i class="white-text small material-icons">done</i></a></li>
<li><a href="#" ><i class="white-text material-icons">add</i></a></li>
</ul>
</div>
</nav>
</div>
<!-- Main menu -->
<ul style="width:200px;"id="slide-out" class="sidenav sidenav-fixed grey darken-2">
<li><a href="#" class="white-text">Menu1</a></li>
<li><a href="#" class="white-text">Menu2</a></li>
<li class="no-padding">
<ul class="collapsible">
<li>
<a class="white-text collapsible-header">Menu3</a>
<div class="collapsible-body grey darken-2">
<ul>
<li><a href="#" class="white-text">Menu3-1</a></li>
<li><a href="#" class="white-text">Menu3-2</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</header>
<main>
<div class="container">
<div class= "col s12 m8 offset-m1 xl7 offset-xl1">
<!-- Record actions -->
<ul id="actions" class="dropdown-content">
<li><a href="#" id="editrecord" class="black-text">Edit</a></li>
<li><a href="#" id="deleterecord" class="black-text">Delete</a></li>
</ul>
<!-- define the TABS -->
<div class='row'>
<div class='col s12 m8 offset-m1 xl7 offset-xl1'>
<ul class='tabs'>
<li class='tab col s3'><a href='#tab0' id='0'>tab0</a></li>
<li class='tab col s3'><a href='#tab1' id='1'>tab1</a></li>
<li class='tab col s3'><a href='#tab2' id='2'>tab2</a></li>
<li class='tab col s3'><a href='#tab3' id='3'>tab3</a></li>
<li class='tab col s3'><a href='#tab4' id='3'>tab4</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- TAB content -->
<div id='tab0' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="1" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
<td>Row 1, column 3</td>
</tr>
<tr id="2" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
<td>Row 2, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- TAB content -->
<div id='tab1' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="3" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 3, column 1</td>
<td>Row 3, column 2</td>
<td>Row 3, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- TAB content -->
<div id='tab2' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="4" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 4, column 1</td>
<td>Row 4, column 2</td>
<td>Row 4, column 3</td>
</tr>
<tr id="5" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 5, column 1</td>
<td>Row 5, column 2</td>
<td>Row 5, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- TAB content -->
<div id='tab3' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="6" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 6, column 1</td>
<td>Row 6, column 2</td>
<td>Row 6, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- TAB content -->
<div id='tab4' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="7" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 7, column 1</td>
<td>Row 7, column 2</td>
<td>Row 7, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- empty table with body is needed to let the dropdon buttons work in a tab -->
<table>
<tbody>
<tr class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions"/>
</tbody>
</table>
</div>
</main>
<script>
M.AutoInit();
var instance = M.Tabs.init(el, options);
</script>
</body>
</html>The problem is about Materialize grid rules. Sum of columns size should be 12 but you have 5 <li> with col s3 class.
<div class='col s12 m8 offset-m1 xl7 offset-xl1'>
<ul class='tabs'>
<li class='tab col s3'><a href='#tab0' id='0'>tab0</a></li>
<li class='tab col s3'><a href='#tab1' id='1'>tab1</a></li>
<li class='tab col s3'><a href='#tab2' id='2'>tab2</a></li>
<li class='tab col s3'><a href='#tab3' id='3'>tab3</a></li>
<li class='tab col s3'><a href='#tab4' id='3'>tab4</a></li>
</ul>
</div>
You can set them again, for example replace s3 with s2.
Also you can eliminate all col s3 classes so Materialize grid system set column sizes automatically.
<!doctype html>
<html>
<head>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<!-- Compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<header class="main-page">
<div class="navbar-fixed">
<nav class="indigo lighten-2">
<div class="nav-wrapper">
<ul>
<!-- Only needed in record form -->
<li><a href="#" id="btnBack" onclick="HAS_Back()"><i class="white-text small material-icons">arrow_back</i></a></li>
</ul>
<!-- Put a "hamburger" menu when the web page gets too narrow -->
<a href="#" id="mainmenu" data-target="slide-out" class="sidenav-trigger"><i class="small material-icons">menu</i></a>
<!-- This attribute will be filled in the initPage() of each called page -->
<a href="#!" id="selectedmenu" class="brand-logo center">Selected Menu</a>
<ul style="heigth:40px;" class="right">
<!-- The specific page has to remove the not needed button -->
<li><a href="#" ><i class="white-text small material-icons">refresh</i></a></li>
<li><a href="#" ><i class="white-text small material-icons">done</i></a></li>
<li><a href="#" ><i class="white-text material-icons">add</i></a></li>
</ul>
</div>
</nav>
</div>
<!-- Main menu -->
<ul style="width:200px;"id="slide-out" class="sidenav sidenav-fixed grey darken-2">
<li><a href="#" class="white-text">Menu1</a></li>
<li><a href="#" class="white-text">Menu2</a></li>
<li class="no-padding">
<ul class="collapsible">
<li>
<a class="white-text collapsible-header">Menu3</a>
<div class="collapsible-body grey darken-2">
<ul>
<li><a href="#" class="white-text">Menu3-1</a></li>
<li><a href="#" class="white-text">Menu3-2</a></li>
</ul>
</div>
</li>
</ul>
</li>
</ul>
</header>
<main>
<div class="container">
<div class= "col s12 m8 offset-m1 xl7 offset-xl1">
<!-- Record actions -->
<ul id="actions" class="dropdown-content">
<li><a href="#" id="editrecord" class="black-text">Edit</a></li>
<li><a href="#" id="deleterecord" class="black-text">Delete</a></li>
</ul>
<!-- define the TABS -->
<div class='row'>
<div class='col s12 m8 offset-m1 xl7 offset-xl1'>
<ul class='tabs'>
<li class='tab'><a href='#tab0' id='0'>tab0</a></li>
<li class='tab'><a href='#tab1' id='1'>tab1</a></li>
<li class='tab'><a href='#tab2' id='2'>tab2</a></li>
<li class='tab'><a href='#tab3' id='3'>tab3</a></li>
<li class='tab'><a href='#tab4' id='3'>tab4</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- TAB content -->
<div id='tab0' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="1" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 1, column 1</td>
<td>Row 1, column 2</td>
<td>Row 1, column 3</td>
</tr>
<tr id="2" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 2, column 1</td>
<td>Row 2, column 2</td>
<td>Row 2, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- TAB content -->
<div id='tab1' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="3" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 3, column 1</td>
<td>Row 3, column 2</td>
<td>Row 3, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- TAB content -->
<div id='tab2' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="4" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 4, column 1</td>
<td>Row 4, column 2</td>
<td>Row 4, column 3</td>
</tr>
<tr id="5" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 5, column 1</td>
<td>Row 5, column 2</td>
<td>Row 5, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- TAB content -->
<div id='tab3' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="6" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 6, column 1</td>
<td>Row 6, column 2</td>
<td>Row 6, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- TAB content -->
<div id='tab4' class='col s12 m6 l3 center-align'>
<table class="bordered">
<thead class='t-h'>
<tr class="tr-h" >
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody class='t-body'>
<tr id="7" class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions">
<td>Row 7, column 1</td>
<td>Row 7, column 2</td>
<td>Row 7, column 3</td>
</tr>
</tbody>
</table>
</div>
<!-- empty table with body is needed to let the dropdon buttons work in a tab -->
<table>
<tbody>
<tr class="tr-d dropdown-trigger" href="#" hover="false" belowOrigin="false" data-target="actions"/>
</tbody>
</table>
</div>
</main>
<script>
$(document).ready(function(){
$('.tabs').tabs();
});
</script>
</body>
</html>