I am expecting something obvious, however I have actually spent quite some time trying to figure this out.
It is ONLY select elements that does not get displayed. I have tried using both local and CDN materialize 1.0.0, neither of them works. I've tried creating select elements without using the example from materialize as well. Inspecting developer tools, the select element and option elements are visible.
When commenting materialize.css out, select element will be displayed and it fetches all responses succesfully and runs the materialize.js file.
This is the element styles when using the materialize.css.
element.style {
}
select {
background-color: rgba(255, 255, 255, 0.9);
width: 100%;
padding: 5px;
border: 1px solid #f2f2f2;
border-radius: 2px;
height: 3rem;
}
select {
display: none;
}
button, input, optgroup, select, textarea {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
button, select {
text-transform: none;
}
button, input, optgroup, select, textarea {
font-family: sans-serif; OVERRIDEN
font-size: 100%;
line-height: 1.15;
margin: 0;
}
*, *:before, *:after {
-webkit-box-sizing: inherit; OVERRIDEN
box-sizing: inherit;
}
user agent stylesheet
select:not(:-internal-list-box) {
overflow: visible !important;
}
user agent stylesheet
select {
border-radius: 0px; OVERRIDEN
border-color: rgb(169, 169, 169); OVERRIDEN
}
user agent stylesheet
select {
-webkit-appearance: menulist;
box-sizing: border-box; OVERRIDEN
align-items: center;
white-space: pre;
-webkit-rtl-ordering: logical;
color: black;
background-color: white; OVERRIDEN
cursor: default;
border-width: 1px; OVERRIDEN
border-style: solid; OVERRIDEN
border-color: initial; OVERRIDEN
border-image: initial; OVERRIDEN
}
user agent stylesheet
select {
border-radius: 5px; OVERRIDEN
}
user agent stylesheet
input, textarea, select, button {
text-rendering: auto;
color: initial; OVERRIDEN
letter-spacing: normal;
word-spacing: normal;
text-transform: none; OVERRIDEN
text-indent: 0px;
text-shadow: none;
display: inline-block; OVERRIDEN
text-align: start;
margin: 0em; OVERRIDEN
font: 400 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
-webkit-writing-mode: horizontal-tb !important;
}
and this is my index.html.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Skater-demo</title>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css CDN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Import materialize.css LOCAL
<link type="text/css" rel="stylesheet" href="./materialize/css/materialize.css">
-->
<link type="text/css" rel="stylesheet" href="index.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<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>
<select>
<option>I will not be displayed</option>
</select>
<script type="text/javascript" src="materialize/js/materialize.js"></script>
</body>
I have created select examples with materialize.css check it out here
<html>
<head>
<title>The Materialize Selects Example</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
<script>
$(document).ready(function() {
$('select').material_select();
});
</script>
</head>
<body class="container">
<div class="row">
<form class="col s12">
<div class="row">
<label>Materialize Select</label>
<select>
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
</div>
<div class="row">
<label>Materialize Multi Select</label>
<select multiple>
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
</div>
<div class="row">
<label>Select with Optgroup</label>
<select>
<optgroup label="Fruits">
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</optgroup>
<optgroup label="Vegs">
<option value="4">Brinjal</option>
<option value="5">Potato</option>
<option value="6">Tomato</option>
</optgroup>
</select>
</div>
<div class="row">
<label>Select with images</label>
<select class="icons">
<option value="" disabled selected>Select Technology</option>
<option value="1" data-icon="/html5/images/html5-mini-logo.jpg" class="circle">
HTML</option>
<option value="2">JavaScript</option>
<option value="3">CSS</option>
</select>
</div>
<div class="row">
<label>Browser default Select</label>
<select class="browser-default">
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
</div>
<div class="row">
<label>Disabled Materialize Select</label>
<label>Disabled Materialize Select</label>
<select disabled>
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
</div>
<div class="row">
<label>Disabled Browser default Select</label>
<select class="browser-default" disabled>
<option value="" disabled selected>Select Fruit</option>
<option value="1">Mango</option>
<option value="2">Orange</option>
<option value="3">Apple</option>
</select>
</div>
</form>
</div>
</body>
</html>