How do I place all three dropdown options next to each other?
<div class="form-group col-md-6">
<select class="form-control" id ="numberRooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select id="numberBeds">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="Year" id="year">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option selected value="2011">2011</option>
</select>
</div>
I'm not able to place the three dropdowns next to each other. Each dropdown should touch each other and should be close to each other. I would like to do it using css3. How do I place all three dropdowns option next to each other?
You can remove the gap between them with font-size: 0, since they are separated by newline char
#nogap {
font-size: 0;
}
<div id="nogap" class="form-group col-md-6">
<select class="form-control" id="numberRooms">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<select id="numberBeds">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="Year" id="year">
<option value="2013">2013</option>
<option value="2012">2012</option>
<option selected value="2011">2011</option>
</select>
</div>
Related
I have three select group with same options.
How to disable options in a selection if this option is selected in another selection?
<select class="form-control" id="first_select" name="foo" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="form-control" id="second_select" name="foo2" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4>4</option>
<option value="5">5</option>
</select>
<select class="form-control" id="third_select" name="foo3" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4>4</option>
<option value="5">5</option>
</select>
You could do it like this:
$(".form-control").on("change", function() {
let selects = $(".form-control").not(this);
let allSelects = $(".form-control");
selects.each(function() {
let options = $(this).find("option");
options.each(function() {
$(this).prop("disabled", false);
});
});
allSelects.each(function() {
let val = $(this).val();
$(".form-control").not(this).find("option[value='" + val + "']").prop("disabled", true);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="first_select" name="foo" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="form-control" id="second_select" name="foo2" required>
<option disabled selected value="0">Wybierz zawód*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="form-control" id="third_select" name="foo3" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Attention, your quotes for value 4 in second and third select is not closed correctly! This will fail the code.
For your option 1, to disable other selects options:
function disableOthers(sender){
var val = $(sender).val();
//To enable all if you change value.
$('#second_select').children().attr('disabled', false);
$('#third_select').children().attr('disabled', false);
$('#second_select').children('option[value="' + val + '"]').attr('disabled', true);
$('#third_select').children('option[value="' + val + '"]').attr('disabled', true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" onchange="disableOthers(this)" id="first_select" name="foo" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="form-control" id="second_select" name="foo2" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="form-control" id="third_select" name="foo3" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
$(document).ready(function() {
$('.form-control').on('change', function(e){
var optionSelected = $("option:selected", this);
var valueSelected = this.value;
$('.form-control').find("option").removeAttr('disabled', '');
$('.form-control').find("option:contains('" + valueSelected + "')").attr('disabled', 'disabled');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control" id="first_select" name="foo" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="form-control" id="second_select" name="foo2" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select class="form-control" id="third_select" name="foo3" required>
<option disabled selected value="0">Choose*</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
Regarding the Materialize select element, I would expect the number of options visible to be 5, yet this is not the case.
I have also tried to set the height but no luck either.
<div class="input-field col s4">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>
Thank you
Materialize uses a dropdown for the select options (it is in fact a dropdown triggered by a text input). So you need to target the dropdown class:
.select-dropdown {
height: 300px;
}
https://codepen.io/doughballs/pen/NWWGNMq
You can simply specify it in the wrapping div here my example is 300px
https://codepen.io/mxnelles/pen/GRJeXGd
<div class="input-field col s4" style="width:300px">
<select id="add_cusine_type" size="5">
<option value="" disabled selected>Choose your cuisine type</option>
<option value="Australian">Australian</option>
<option value="American">American</option>
<option value="British">British</option>
<option value="Carribean">Carribean</option>
<option value="Chinese">Chinese</option>
<option value="French">French</option>
<option value="Greek">Greek</option>
<option value="Indian">Indian</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Mediterranean">Mediterranean</option>
<option value="Mexican">Mexican</option>
<option value="Moroccan">Moroccan</option>
<option value="Spanish">Spanish</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Vietnamese">Vietnamese</option>
</select>
<label>Cuisine Type</label>
</div>
I'm using a select tags to select options from a dropdown list, but due to the number of items, the list goes up, as if its drop-up. I am using Bootstrap.
Checked other codes but not found any result.
<div class="select-style" style="display: inline-block;">
<select id="year">
<option value="hide">-- Year --</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
</select>
</div>
This option goes upwards when there are more options in the menu. I want it to go in the downward direction.
Try <select id="year" size="5"> you can also ajust the height with css
You can use CSS like
CSS:
#year {
width:150px;
}
If you want to change the width of the option you can do this in your css:
#year option{
width:150px;
}
I Found a solution that will force expanding downwards and you can define the height of the select. Here is the Fiddle (you need resources): JSFiddle
$(function(){
$('select').chosen({width: '100px'});
$('ul.chosen-results').css('min-height', '100px');
$('ul.chosen-results').css('max-height', '100px');
});
<select>
<option value='1'>2010</option>
<option value='2'>2011</option>
<option value='1'>2012</option>
<option value='2'>2013</option>
<option value='1'>2014</option>
<option value='2'>2015</option>
<option value='1'>2016</option>
<option value='2'>2017</option>
<option value='1'>2018</option>
<option value='2'>2019</option>
</select>
set offset attribute in negative number until it moves downward.
(it worked for me in material tailwind components)
<select id="year" offset={-50}>
<option value="hide">-- Year --</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
</select>
Just use data-dropup-auto="false"
Example:
<div class="select-style" data-dropup-auto="false" style="display: inline-block;">
<select id="year">
<option value="hide">-- Year --</option>
<option value="2010">2010</option>
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="2015">2015</option>
<option value="201">2011</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
<option value="202">2012</option>
<option value="203">2013</option>
<option value="204">2014</option>
<option value="205">2015</option>
</select>
</div>
I am getting special characters in select option for chrome only.
<div class="ius-text-input-container first-name-input name-input">
<div class="styled-select expiry-period complete">
<select name="billingState" id="billingState" placeholder="state" style="border-color: rgb(158, 158, 158);">
<option value="State">State</option>
<option value="AK">AK</option>
<option value="AL">AL</option>
<option value="AR">AR</option>
<option value="AS">AS</option>
<option value="AZ">AZ</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DC">DC</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="FM">FM</option>
<option value="GA">GA</option>
<option value="GU">GU</option>
<option value="HI">HI</option>
<option value="IA">IA</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="MA">MA</option>
<option value="MD">MD</option>
<option value="ME">ME</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MO">MO</option>
<option value="MP">MP</option>
<option value="MS">MS</option>
<option value="MT">MT</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="NE">NE</option>
<option value="NH">NH</option>
<option value="WV">WV</option>
<option value="WY">WY</option>
</select>
</div>
</div>
<label for="adults">Adults</label>
<select name="audits">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
<label for="children">Children</label>
<select name="audits">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
How to display label and select as the followings?
+------------+ +----------------+
|label | |label |
+------------+ +----------------+
+------------+ +----------------+
|select | |select |
+------------+ +----------------+
Surround each label and select group in a <div> and in CSS you can display: block the <label> and <select> then float: left the <div>.
<style>
div { float: left; }
label, select { display: block; }
</style>
<div>
<label for="adults">Adults</label>
<select name="audits">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
<div>
<label for="children">Children</label>
<select name="audits">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
<div class="l-one">
<label for="adults">Adults</label>
<select name="audits">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
<div class="l-two">
<label for="children">Children</label>
<select name="audits">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
</div>
after adding div give to fix width of that <div> and give lable to dispaly:block and also give dispaly:block to <select>
EDIT: After seeing that you don't want to add any additional markup, I may have a solution for you. You'll be re-ordering your markup slightly, but it will retain its semantic value.
One quick note: the for attribute in your label tag should match the name attribute in your select tags. I've changed the HTML to reflect that.
HTML:
<label for="adults">Adults</label>
<label for="children">Children</label>
<select name="adults">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
<select name="children">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10+">10+</option>
</select>
CSS:
label, select {display: inline-block; float: left; width: 150px; margin: 0px 5px;}
select[name="adults"] {clear: both}