When using materialize css tabs, all the divs load one below the other on the initial page load.
If I refresh the page, it starts behaving properly.
<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s3"><a href="#test1">Test 1</a></li>
<li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
<li class="tab col s3 disabled"><a href="#test3">Disabled Tab</a></li>
<li class="tab col s3"><a href="#test4">Test 4</a></li>
</ul>
</div>
<div id="test1" class="col s12">Test 1</div>
<div id="test2" class="col s12">Test 2</div>
<div id="test3" class="col s12">Test 3</div>
<div id="test4" class="col s12">Test 4</div>
This issue occurs initially or after a server restart:
The problem is resolved upon refreshing the page as expected.
I have included all necessary js (jquery and materialize) and css files with tab initialization.
$(window).on("load", function () {
$('ul.tabs').tabs();
});
I have also tried:
$(document).ready(function () {
$('ul.tabs').tabs();
});
However, the issue persists.
If anyone knows a solution to this problem, please share.
I encounter several issues like this with materialize.
Additionally, I am using react which may be contributing to the problem.
When using react-materialize, I face the following dilemma:
<Tabs className='tab purple darken-4'>
<div className="container">
<Tab title="All">1</Tab>
<Tab title="Ongoing" active>2</Tab>
<Tab title="Successful">3</Tab>
<Tab title="Failed/Warning">4</Tab>
</div>
</Tabs>