I am trying to move the search box in a select2, so that it will appear on the bottom of the results when the select is opening above and on the top when the select2 is opening below.
It should basically look like this:
I have tried the following and although the moving part works, I cna not find a way to attach it to the proper event. if you scroll the page and the select go from above to belove, the search box will not change back because it is attacched to the select2:open event.
Is there an event (like render maybe) that I can use to make sure that I can change the position of the search box every time the select2 moves?
OR
How can I move the search box to always be at the bottom when select2 opens above and at the top when it opens below?
you can see it in this https://codepen.io/anon/pen/ZaxZOa better than the snippet because you can also scroll here.
$( document ).ready( function() {
$( '.js-example-basic-single' ).select2();
//$('.select2-results').insertAfter('.select2-search--dropdown');
$('.js-example-basic-single').on('select2:open', function(){
$('.select2-dropdown--above .select2-search--dropdown').insertAfter('.select2-results');
});
});
.form-control {
width: 360px;
height: 34px;
padding: 6px 12px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<h1>Select2</h1>
<div class="col">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<label for="js-example-basic-single">Select2: select a US state</label><br>
<select class="js-example-basic-single form-control" id="js-example-basic-single">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
</select>
</div>
I solved this with CSS flexbox. Making the selct2 a flex and then changing the order of the search andresult divs.
.select2-dropdown--above{
display: flex; flex-direction: column;
}
.select2-dropdown--above .select2-search--dropdown{
order: 2;
}
.select2-dropdown--above .select2-results {
order: 1;
}
.select2-dropdown--below{
display: flex; flex-direction: column;
}
.select2-dropdown--below .select2-search--dropdown{
order: 1;
}
.select2-dropdown--below .select2-results {
order: 2;
}
Related
By default a <select> element is a dropdown menu which I don't want: I want to display the full list. This is possible with multiple:
<select name="pets" multiple size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>
but then obviously the user can select multiple elements.
How to have a full list view (like with multiple, i.e. no dropdown menu), but have only one possible selected element?
Use the size attribute which takes the number of items you want to display and set it to the number of options you have (6) in order to get the full list view. Since you only want to allow 1 item to be selected, also remove the attribute multiple from the select element.
<select name="pets" size=6>
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>
Check mdn for more information about the available attributes for the select element.
You can make the <select> 100% of the height of the <form> that contains it. See this fiddle for an example of a div enclosing a form, with a select filling the height of the form.
This starts with a simple structure, just enough that the form is enclosed in something so you can see the relative layout.
<div>
<form>
<select id="thelist" name="pets" size="6">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">hamster</option>
<option value="4">bird</option>
<option value="5">donkey</option>
<option value="6">fish</option>
</select>
</form>
</div>
I give the div a height, a background so you can see it, and padding so it's content doesn't naturally cover it. Make the form any height you want, including 100% of the div. I made it 90% so you can still see the enclosing div. Notice the form's width fills the div width except for the padding.
You can then just set the height of the select list to anything you want inside the form. Here's my CSS
div {
background-color: #fff0f0;
height: 40em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 90%;
}
#thelist {
height: 100%;
}
Put together as a snippet, and making it smaller to fit better here...
div {
background-color: #fff0f0;
height: 20em;
padding: 1.5em 1.5em 0 1.5em;
}
form {
background-color: #f0f0f0;
height: 40%;
}
#thelist {
height: 100%;
}
<div>
<form>
<select id="thelist" name="pets" size="6">
<option value="1">dog</option>
<option value="2">cat</option>
<option value="3">hamster</option>
<option value="4">bird</option>
<option value="5">donkey</option>
<option value="6">fish</option>
</select>
</form>
</div>
I've tested a few solutions and found that you had to remove the multiple attribute from the <select> element
<select name="pets" size="5">
<option>dog</option>
<option>cat</option>
<option>hamster</option>
<option>bird</option>
<option>donkey</option>
<option>fish</option>
</select>
I'm having an issue with a multiple select. The only way that can works what I am trying to make is with a multiple select, but I need to transform it to a single dropdown select because that way is design.
The question is: How can I transform a multiple select in a single select? I add a screenshot:
I have it like this:
and the design should be like this:
Is there anyway for transform it with html or css without remove the multiple="multiple" property?
My tag:
<select multiple="multiple" class="destination_s input input--select"></select>
Regards
The only way I see is to stylize a div that looks like an HTML select and with JavaScript show and hide the select Multiple. This is a quick example I just made (maybe the code could be better):
function showSelect(classname) {
document.getElementById('sel').className = classname;
}
.hidden {
display: none;
}
.visible {
display: block;
}
.div {
border: 1px solid black;
width: 100px;
}
#sel {
width: 100%;
}
.arrow {
float: right;
}
<div class="div" onmouseover="showSelect('visible')" onmouseout="showSelect('hidden')">
Choose... <span class="arrow">▼</span>
<select multiple="multiple" class="hidden" id="sel">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
<option value="">6</option>
<option value="">7</option>
<option value="">8</option>
<option value="">9</option>
<option value="">10</option>
</select>
</div>
Also consider use a framework like Chosen to make it more easily.
i got your point but it cant be possible with the help of HTML/CSS only.
You need have JS or jQuery at some point.
Please refer below plugins which might help you to sort it out.
http://wenzhixin.net.cn/p/multiple-select/docs/
https://www.jqueryscript.net/form/jQuery-Plugin-For-Multiple-Select-With-Checkboxes-multi-select-js.html
you can also use Chosen, Select2 Plugins too.
I made a select with javascript and filled its options with an array. Afterwards I wrote some jquery to try and change the backgroundColor of the option when I hover over it, but nothing seems to work. everytime I hover over the options they are still highlighted blue.
I'm new to javascript and jquery and this is an idea that I had of why this happens: could this be because there is a standard hover function in a select that will always override mine or am I really overlooking a mistake? Because I tested my code before on divs and the code worked like a charm here
My code:
//arraycommObjName is an array with 4 elements to fill my selection
//$('#commObjs') is my select
for (i=0; i < arraycommObjName.length; i++) {
$('#commObjs').append($('<option class="testoptions"></option>').attr("value", arrayCommObjID[i]).text(arraycommObjName[i]));
}
$(".testoptions").hover(function(e) {
$(this).css("background-color",e.type === "mouseenter"?"green":"red")
})
take note yes I know it's better to do this with css but it is asked to me to do it with only javascript and jquery.
You can use select2 and add some CSS to override the default styles.
Below is an example with some horrific colors to prove you can override the default select2 white and blue colors.
$("#states").select2();
#states {
width: 300px;
}
.select2-results__option {
color: orange;
background-color: seashell;
}
.select2-results__option--highlighted {
color: white !important;
background-color: darkgreen !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: darkgray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<select id="states">
<option value="">Select...</option>
<option value="AZ">Arizona</option>
<option value="CA">California</option>
<option value="CO">Colorado</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</select>
I have a "state" select and a few "carrier" selects. for simplicity I'm using only two carrier selects here.
My jquery is suppose to show the carrier selects based on the the state selected.
The state select value is appended to the carrier select name so I can choose which carrier select to add a specific class to.
MY PROBLEM: My carrier selects wont show up. I had this working at one point, and I must've changed something along the way. Not sure whats happening here. Any help would be great. Thanks!
EDIT: I've added my original JS to show where I was, and how I want to change to Jquery.
HTML:
<div style="width:160px;">
<select name="state_select" id="state_select">
<option value="0" selected>Choose a state</option>
<option value="1">Connecticut</option>
<option value="2">New Hampshire</option>
<option value="3">New Jersey</option>
<option value="4">New York</option>
</select>
</div>
<div id="select-div1" class="select-div">
<select name="carrier_select" id="carrier_select1" class="carrier_select">
<option selected disabled>Select a carrier - Conn</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
<div id="select-div" class="select-div">
<select name="carrier_select" id="carrier_select2" class="carrier_select">
<option selected disabled>Select a carrier - NH</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
JQUERY:
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('div.select-div select').val();
selectDiv = $('#carrier_select')[0] + stateVal;
if ($(stateVal).attr('selected', 'selected')) {
$(selectDiv).attr('class', "conn_select", "nh_select", "nj_select", "ny_select");
$(selectDiv).addClass("dropdown-box");
} else {
$(selectDiv).attr('class', 'carrier_select');
}
}
$('#state_select').change(function(e) {
$('.carrier_select').prop('selectedIndex', 0);
optionCheck();
});
MY JAVASCRIPT (WORKS) BEFORE TRYING JQUERY:
function optionCheck() {
var i, len, optionVal, selectDiv,
selectOptions = document.getElementById("state_select");
// loop through the options in case there
// are multiple selected values
for (i = 0, len = selectOptions.options.length; i < len; i++) {
// get the selected option value
optionVal = selectOptions.options[i].value;
// find the corresponding help div
selectDiv = document.getElementById("carrier_select" + optionVal);
// move on if I didn't find one
if (!selectDiv) { continue; }
// set CSS classes to show/hide help div
if (selectOptions.options[i].selected) {
selectDiv.className = "conn_select nh_select nj_select ny_select";
$(selectDiv).addClass("dropdown-box");
} else {
//Hide carrier select on page load
selectDiv.className = "carrier_select";
}
}
}
// bind the onchange handler
document.getElementById("state_select").onchange = optionCheck;
CSS:
.select-div select {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
.carrier_select {
display: none;
}
First off, your code has some redundancies and some questionable decisions in it in my humble opinion that you could work around in order to simplify and/or make it more usable. However, there is a way to achieve what you want with most of it untouched, using Javascript/jQuery code. For the full thing, check this fiddle, the script is below as well along with its explanation:
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('#state_select').val();
selectDiv = $('#carrier_select'+ stateVal);
$('.dropdown-box:not(#state_select_box)').removeClass('dropdown-box').addClass('carrier_select');
$(selectDiv).removeClass('carrier_select').addClass('dropdown-box');
$($selectDiv).val('0');
}
$('#state_select').change(function(e) {
optionCheck();
});
What this does is it gets the val() of #state_select, appends it to the #carrier_select so that the selector targets the right id, then changes all active selectors, except the #state_selector_box (which I made to wrap around #state_select) to ones with the .carrier_select class, thus making them invisible and then it finally makes the one that corresponds to the selected state visible using the dropdown-box class. Also the val() of the selector that just appeared is set to 0.
You are telling css to hide the element
.carrier_select {
display: none;
}
Both of your select elements have the class "carrier_select" and as a result of this css definition, they are not displayed. Remove or change this definition for them to be shown.
Edited in such a way that you can see the carrier selections. But other part of your question - appending to carrier name, showing carriers depending on the state needs more inputs.
$('#state_select').prop('selectedIndex', 0);
$('.carrier_select').prop('selectedIndex', 0);
function optionCheck() {
stateVal = $('div.select-div select').val();
selectDiv = $('#carrier_select')[0] + stateVal;
if ($(stateVal).attr('selected', 'selected')) {
$(selectDiv).attr('class', "conn_select", "nh_select", "nj_select", "ny_select");
$(selectDiv).addClass("dropdown-box");
} else {
$(selectDiv).attr('class', 'carrier_select');
}
}
$('#state_select').change(function(e) {
$('.carrier_select').prop('selectedIndex', 0);
optionCheck();
});
.select-div select {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
text-indent: 1px;
text-overflow: '';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="dropdown-box" style="width:160px;">
<select name="state_select" id="state_select">
<option value="0" selected>Choose a state</option>
<option value="1">Connecticut</option>
<option value="2">New Hampshire</option>
<option value="3">New Jersey</option>
<option value="4">New York</option>
</select>
</div>
<div id="select-div1" class="select-div">
<select name="carrier_select" id="carrier_select1" class="carrier_select">
<option selected disabled>Select a carrier - Conn</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
<div id="select-div" class="select-div">
<select name="carrier_select" id="carrier_select2" class="carrier_select">
<option selected disabled>Select a carrier - NH</option>
<!--PHP GENERATED OPTIONS-->
</select>
</div>
Without commenting on the rest of the code, try removing
.carrier_select {
display: none;
}
I'm using this jquery plugin to make my select dropdown boxes look nicer. http://code.google.com/p/select-box/
Here's a fiddle of it working:
http://jsfiddle.net/FQKax/1/
I want to have the two dropdowns to be different widths but I've tried wrapping them in divs, tried to hack the js to give them different ids, everything I can think of but no joy.
Also I'm ashamed to admit I can't seem to change the color of the text in the actual dropdown bit. I can change the backgound colour etc but buggered if I can change the color of the text... weird
There's an option that you can specify what to use as classname for the sbHolder object, but you don't want to change that since you would need to rewrite the CSS. It'd be nice if they let you set an additional class to apply, but they don't.
I would just put a wrapper around the select element and use CSS to override the default width http://jsfiddle.net/FQKax/8/
.wrapper-one .sbHolder{
width: 500px;
}
.wrapper-two .sbHolder {
width: 200px;
}
<div class="wrapper-one">
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
<br/><br/>
<div class="wrapper-two">
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
</div>
This requires adding some markup, #cih's answer doesn't. It just requires using jQuery to mark each instance accordingly http://jsfiddle.net/FQKax/37/
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(index){
$(this).addClass('instance-' + index);
});
.instance-0.sbHolder{
width: 500px;
}
.instance-1.sbHolder {
width: 200px;
}
$(".sbHolder").first().addClass("first");
That will add a class you can target on you first checkbox, there better way to iterate through multiple selectors, check out this link..
Other than that Joe answers the rest of your question.
Try this
http://jsfiddle.net/FQKax/30/
<link href="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://select-box.googlecode.com/svn/tags/0.2/jquery.selectbox-0.2.min.js"></script>
<select id="language">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
<br/><br/>
<select id="language2">
<option value="javascript">Javascript</option>
<option value="objective-c">Objective C</option>
<option value="python">Python</option>
</select>
##### JQUERY #######
$(function () {
$("#language").selectbox();
$("#language2").selectbox();
$(".sbHolder").each(function(){
var $langDom = $(this);
if($langDom.prev().attr('id') == 'language'){
$langDom.addClass("language_1");
} else if($langDom.prev().attr('id') == 'language2') {
$langDom.addClass("language_2");
}
});
});
###### CSSS TO ADD #####
.language_1{
width: 1200px;
}
.language_2{
width: 200px;
}
For the text color, change .sbOptions a:link, .sbOptions a:visited {} and/or .sbOptions a:hover, .sbOptions a:focus, .sbOptions a.sbFocus {}.
For the widths, .sbOptions is your dropdown width, and .sbHolder {} is the width of the "currently selected" item.