Although this question has already been asked in this thread:
Materialize CSS - Select Doesn't Seem to Render
I'm having problems with where to place this code:
$(document).ready(function() {
$('select').material_select();
});
At the moment, the most logical thing I can think of is to place it like so:
<body>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js">
$(document).ready(function() {
$('select').material_select();
});
</script>
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</body>
I've tried changing the "document" to the name of my document, in this case "index", but it still doesn't work.
Am I just being slow?
Thanks in advance.
Try this:
<body>
<div class="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</body>
You need use a class "browser-default" to show the select combo. Like this:
<select name="name" class="browser-default"><option>- options -</option></select>
i had same problem in 2019, these answers helped, but a little update cause of the Materialize version upgraded
M's select and form are better than browser-default one:)
now the initialization code is changed to
$(document).ready(function(){
$('select').formSelect();
});
https://materializecss.com/select.html
You need to initialise the select element as shown here :
https://materializecss.com/select.html#initialization
$(document).ready(function(){
$('select').formSelect();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="input-field col s12">
<select multiple>
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Multiple Select</label>
</div>
this work for me. The main change is the version, not use 1.0.0. then use 0.97.2
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.2/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
<?!= include("Planificacion-js");?>
</body>
Related
I am trying to create a drop down with multi select options (don't look at the content, its for tests only).
I added css links:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
and scripts:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
Dropdown looks like:
<select th:field="*{cars}" class="form-control selectpicker" multiple data-live-search="true">
<option value="" selected disabled>Choose Role</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br/>
but after run it looks like:
When I remove class attribute I am getting normal select with multiple option:
Be sure to implement your script tag for jQuery correct:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Then your code is running.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<select th:field="*{cars}" class="form-control selectpicker" multiple data-live-search="true">
<option value="" selected disabled>Choose Role</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select><br/>
I have 2 <select> inside a hidden <div> which is revealed by a hover function in jQuery. The problem is that once the <div> is visible, if I click on any of the <select>s and move the cursor to the options inside, they collapse this <div> making it impossible to interact with them. This is an issue that I've been experiencing only in Firefox.
If anyone can give me a clue of what's causing the problem that'd be greatly appreciated.
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').hover(mouseEnter, mouseLeave);
function mouseEnter() {
$(".options-container").show(200);
};
function mouseLeave() {
$(".options-container").hide(200);
};
</script>
This is the reported issue in firefox. However I have made few changes on mouseleave event and also have updated the functions and now it will work fine on any browser also in firefox.
$(document).ready(function() {
$(".options-container").hide();
});
$('#tester-container').mouseenter(function() {
$('.options-container').show(200);
});
$('#tester-container').on('mouseleave', function(event) {
if ($('.options-container').has(event.target).length > 0) {
event.stopPropagation();
return;
} else {
$('.options-container').hide(200);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tester-container">
<div class="options-container">
<select id="tester-fs">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3" selected>Option 3</option>
</select>
<select id="tester-align">
<option value="left" selected>Left</option>
<option value="center">Center</option>
<option value="right">Right</option>
</select>
</div>
<div class="font-tester">
<div style="font-size: 80px;">hover here</div>
</div>
</div>
I tried the background color of the MaterializeCSS select. I attempted to use this question, but it did not work Change select box option background color as it was for regular HTML (no Materialize).
How could I do this?
It has to do with Materialize's selectors. The below code worked for me:
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<div class="input-field col s12">
<select class="select1">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
<style>
input.select-dropdown {
background: #1A1B1C !important;
color: #26a69a;
}
ul.dropdown-content.select-dropdown li span {
background: #1A1B1C;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
</script>
The options in select tag is not displaying in materialize css.
<div class="row">
<div class="browser-default input-field col s12">
<select name="select_1" id="select_1">
<option value="" disabled selected>Choose your option</option>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
</div>
js:
$(document).ready(function(){
$('select').formSelect();
});
I have used $('select').material_select(); but still the options did not show.
Any reason for this? How can I show the options in the select?
I have missed the below part.
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
I need to create a filter form which only shows year option. The input can be be a dropdown list of year or datepicker that only shows year option.
Do you know how to create it? please let me know, I am a beginner,
I have tried to find solution, but didn't find any.
Thank you, I appreciate any helps.
Thanks #Reystleen for answer in the comment!
ANSWER: https://itsolutionstuff.com/post/bootstrap-year-picker-example-using-datepicker-jsexample.html
CODE:
<html lang="en">
<head>
<title>Bootstrap - year picker only example</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
</head>
<body>
<div class="container text-center">
<h2>Bootstrap - year picker only example</h2>
<input class="date-own form-control" style="width: 300px;" type="text">
<script type="text/javascript">
$('.date-own').datepicker({
minViewMode: 2,
format: 'yyyy'
});
</script>
</div>
</body>
</html>
Something like this:
<select name="birthyear">
<option value="2018">2018</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<option value="2015">2015</option>
<option value="2014">2014</option>
<option value="2013">2013</option>
<option value="2012">2012</option>
<option value="2011">2011</option>
<option value="2010">2010</option>
etc.
</select>