Anybody knows why the materialize select It’s not working if has the input-field class? I’m using the last materialize version(0.100.2). I’m also adding all the requiered files(css,js,jquery). It works if use the "browser-default" class but not with the "input-field". Any idea of why it’s not working? Help.
It should work like this, but it is not:
<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>
Only works like this, and looks bad:
<label>Browser Select</label>
<select class="browser-default">
<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>
Related
I'm trying to add 2 select dropDown materialize css side by side, in my react app.
But instead they are stacked one on top of each-other and taking up the full width. here is my code.
const SearchPillows = () => {
return (
<div className="container">
<div className="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>
<div className="input-field col s12">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1" className="left">Option 1</option>
<option value="2" className="left">Option 2</option>
<option value="3" className="left">Option 3</option>
</select>
</div>
</div>
<p>hello</p>
</div>
);
};
export default SearchPillows;
Please assist, thanks !!
Several errors in your code:
1) No .row div. .col must live in rows to be responsive.
2) No class name to make the columns side by side, which is .s6, .m6 .l6 etc.
3) Missing closing div tag after the first select.
<div class="container">
<div class="row"><!-- < This was missing -->
<div class="input-field col s12 m6">
<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>
</div><!-- < This was missing -->
<div class="input-field col s12 m6">
<select>
<option value="" disabled selected>Choose your option</option>
<option value="1" className="left">Option 1</option>
<option value="2" className="left">Option 2</option>
<option value="3" className="left">Option 3</option>
</select>
</div>
</div>
<p>hello</p>
</div>
</div>
Codepen.
I am using Materialize.css library (v 1.0.0), as of 2018 for my project to add the material components. However, I failed to initialize two select boxes with it.
I have two select boxes in my page.
$(function() {
$("#numPagesPaginate").formSelect();
$("#numRatingsEdit").formSelect();
});
<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select id="numRatingsEdit" name="numRatingsEdit" style="display:none">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
However, when I initialize both the select boxes using this only the first one works.
In addition, if I initialize the second selectbox in the script tag elsewhere, the box gets initialized and works, but there is one duplicate selectbox.
Edited: To add this question, I want to tell you that I have read the documentation and the default method. However, no results.
You should follow documentation and initialize globally with one line:
$('select').formSelect();
Just like Serg said, you should follow the documentation properly.
<div class="container">
<div class="row">
<div class="col s6">
<label>Num Pages Paginate</label>
<select id="numPagesPaginate" name="numPagesPaginate" data-ng-model="bkCtrl.page.pageSize">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
<div class="col s6">
<label>Num Ratings Edit</label>
<select id="numRatingsEdit" name="numRatingsEdit">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('select').formSelect();
});
</script>
I have a problem with IE11 and menu.
When opened the combo, the cursor changes depending on the input behind.
<div>
<select>
<option value="1">option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</select>
<input type="text" value="mouse changes" readonly="readonly" />
</div>
When trying in IE11, the cursor changes in option 2, to the readonly, it select the option if clicking but it seems forbidden option.
I am working on a project which uses Materialize css for front end.
Is there any way to get multi select option for dropdown in Materialize css ?
Any piece of info would be helpful.
You only have to add the multiple:
<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>
And then call js:
$(document).ready(function() {
$('select').material_select();
});
jsfiddle
MaterializeCSS's dropdown implementation is not a <select> block. It is just a styled <ul>. Therefore, I don't believe you can take advantage of a multi-select with their implementation. I would use the default <select> block like this:
<select class="browser-default" multiple>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
Note: you must add the browser-default class so that MaterializeCSS doesn't render it.
Since the top and left css properties of the label are set to ~0.8rem each, you can add a specific rule to the li's:
#topics_dropdown li {
height: 3rem;
}
We want to display birthday in dropdown list
How to use Multiple select tag in single line while using bootstrap?
<div class="form-group col-lg-12">
<label>Birthday</label><br>
<select class="form-control" id="sel1">
<option value="jan">Jan</option>
<option value="jan">Feb</option>
<option value="jan">Mar</option>
................
<option value="jan">Dec</option>
</select>
<select class="form-control" id="sel2">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
................
<option value="jan">12</option>
</select>
<select class="form-control" id="sel2">
<option value="">Year</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
................
<option value="2015">2015</option>
</select>
</div>
Note: we are using bootstrap
You need to use the form-inline class on the parent element...
<div class="form-inline">
<div class="form-group col-lg-12">
<label>Birthday</label><br>
<select class="form-control" id="sel1">
<option value="jan">Jan</option>
<option value="jan">Feb</option>
<option value="jan">Mar</option>
................
<option value="jan">Dec</option>
</select>
<select class="form-control" id="sel2">
<option value="">Day</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
................
<option value="jan">12</option>
</select>
<select class="form-control" id="sel2">
<option value="">Year</option>
<option value="1992">1992</option>
<option value="1993">1993</option>
<option value="1994">1994</option>
................
<option value="2015">2015</option>
</select>
</div>
</div>
DEMO