I am using materialize css. I created a tab and put select element inside it. But it was not closing after selecting element.I am using materialize 0.98.
If i put it outside tab then it works.
Here is my code :
My Scrtipt
<script>
$(document).ready(function(e) {
$('ul.tabs').tabs({'swipeable': true});
$("select").material_select();
});
</script>
Html Code :
<div class="main mainContentMargin">
<div class="row">
<!-- This will Work-->
<div class="col s12 input-field">
<select id="company_select1" name="company_select1">
<option value="-1" selected>Select Company</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>Select Company</label>
</div>
</div>
<div class="row">
<div class="card col s12 medium">
<ul id="tabs-swipe-demo" class="tabs tabs-fixed-width" style="margin-bottom: 1%">
<li class="tab col s6"><a href="#test-swipe-1">To Supplier</a></li>
<li class="tab col s6"><a href="#test-swipe-2">Using Product</a></li>
</ul>
<div id="test-swipe-1" class="col s12">
<!-- This will Work but not closing the dropdown-->
<div class="row">
<div class="col s12 input-field">
<select id="company_select" name="company_select">
<option value="-1" selected>Select Company</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<label>Select Company</label>
</div>
</div>
</div>
<div id="test-swipe-2" class="col s12">
</div>
</div>
</div>
</div>
Dropdown is not closing because we make tab swipeable. That's why it dropdown click event was catched by the tab.
I just set the stopPropogation option to true in dropdown and it work
$(document).ready(function(e) {
$('ul.tabs').tabs({'swipeable': true});
$("select").material_select({"stopPropagation":true});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments