Develop Reference

Select2 - Make each selected option be in its own line

I was wondering if there's an option in select2 to make each selected item appear in its own line when using multiple selection.
<select id="items-select" multiple>
<optgroup label="Items">
<option>Alpha</option>
<option>Bravo</option>
...
<option>Zulu</option>
</optgroup>
</select>
$('#items-select').select2();
This is the default behavior
I want each option to appear in its own line because the selected options could be 30+ at a time and it would make it easier for the user to check if they got what they wanted.
I tried using the templateSelection option but adding a line break or a <br> tag did nothing there. Currently, I'm able to achieve this by using the following CSS rule
.select2-selection__rendered {
display: grid !important; /* by default it's inline-block */
}
Is there something I'm missing or is there no other way to do this?

You could add the following CSS rule :
.select2-selection--multiple .select2-selection__choice {
display: block !important;
width: fit-content;
}

Semantic UI Multi-Level Dropdown with the selection class does not expand

When I try and use the dropdown with search selection and select a subcategory, it expands into itself and a small scrollbar appears in the dropdown. If I don't add search selection it seems to function just fine.
JSFiddle: https://jsfiddle.net/utqz406p/4/
How do I correct this issue?
Edit: This also seems to happen with the selection class as well.

You need to override the default selection dropdown style.
Please use this style
.ui.selection.dropdown .menu {
overflow: visible !important;
}

How to display bootstrap select combo box in datatable?

Can anyone help me with my following query please:
- I am using dataTable to display my data. However, when I am using bootstrap select dropdown to display inside one of the column then, when menu gets open it's hide by dataTable. So how to resolve this:
As you can see the other two menu item is hidden by dataTable so how to show all of the three menu item????
Should show me like other two items as well of the combobox like following:
Some dropdown code:
<select class="selectpicker remove-example">
<option value="Mustard">Mustard</option>
<option value="Ketchup">Ketchup</option>
<option value="Relish">Relish</option>
Table will be the bootstrap and dataTable.....
Please let me know if anyone have any idea??? Thanks in advanced:)

You have to set the container option, see example here
So you code become:
<select class="selectpicker remove-example" data-container="body">
<option value="Mustard">Mustard</option>
<option value="Ketchup">Ketchup</option>
<option value="Relish">Relish</option>

I resolved my issue by removing some of the lines from bootstrap component.css file as they are stopping overflow of the combo box out of the box.
As it was look like following:
.table-scrollable {
width: 100%;
/* overflow-x: auto;*/ /* removed on 24/11/2015 as stop overflowing combobox*/
/* overflow-y: hidden;*/ /* removed on 24/11/2015 as stop overflowing combobox*/
border: 1px solid #dddddd;
margin: 10px 0 !important;
}
So good think is it's working now so, it's not good idea to directly edit the bootstrap component.css file but you can do the inline as well wherever you want combo into the table which have table-scrollable class.
Good part is it's working.:)

jQuery - add icon to select option based on value

I am currently trying to make any use of Polylang, a Wordpress plugin that allows to add language switcher to the website.
It currently generates simple select dropdown menu and changes the language upon selecting the language, so it's ok, however I am unable to style it properly - it's a raw dropdown menu.
I would like to add icons next to the displayed option, and as far as I know jQuery is my best shot here.
The issue I am having is that <option> tags are missing id or class tags, and it is impossible to add them without modifying the plugin itself.
Is it possible to create a jquery script that will display a flag next to the option based on it's value attribute?
Can you show me any example how to?
<select name="lang_choice" id="lang_choice">
<option value="en">English</option>
<option value="fr" selected="selected">French</option>
<option value="de">Deutsch</option>
</select>

SOLUTION 1 (Flags outside of the dropdown):
Try this:
$('<img class=flagicon src="'+$("select#lang_choice").val()+'.png">').insertAfter("#lang_choice");
$("select#lang_choice").change(function(){
$(".flagicon").attr("src", $("select#lang_choice").val()+'.png');
});
The function assumes, that you have your flags named fr.png, de.png and en.png
The first line adds the first icon, if no option has changed yet.
JSFiddle: http://jsfiddle.net/2j46orr4/1/
SOLUTION 2 (Flags inside the dropdown, every option has its own background-image):
If you want to show the flag INSIDE the option, use a background-image:
CSS:
#lang_choice {
background-repeat: no-repeat;
background-image: url(/img/en.png);
background-position: right center;
padding-right: 20px;
}
#lang_choice option:nth-child(1) {
background: url(/img/en.png) no-repeat right center;
}
#lang_choice option:nth-child(2) {
background: url(/img/fr.png) no-repeat right center;
}
#lang_choice option:nth-child(3) {
background: url(/img/de.png) no-repeat right center;
}
jQuery:
$("select#lang_choice").css("background-image",'url(/img/'+$("select#lang_choice").val()+'.png)');
$("select#lang_choice").change(function(){
$("select#lang_choice").css("background-image",'url(/img/'+$("select#lang_choice").val()+'.png)');
});
The flags have 16px margin on their right, so they are not hidden under the option arrow.
Demo: http://jsfiddle.net/2j46orr4/7/
(Chrome does not seem to render the option > background-image at the moment.)

you can use a jquery plugin like this one.
HERE: http://designwithpc.com/Plugins/ddSlick#demo

Styling a select box with a size attribute?

For the life of me I can't figure out how to style a select box that uses the size attribute. Almost all of the tutorials out there are for a single-item select box. Does anybody have any experience with select boxes that use the size attribute?
For reference, this is what I'm talking about:
<select class="awesome_select" size="5">
<option>1</option>
<option>2</option>
</select>
I'm developing on Chrome/Safari/Firefox for Mac. I have tried the -moz-appearance: none; and -webkit-appeareance: none; properties for both the select box and the individual options. I have also tried setting a border on the select and the options.
I am able to style the select box in the sense that I can resize it, move it around, and change the font size, but I am completely unable to style the individual options.
edit 1 Here's an example of what I want to do:
select.awesome_select {
border: 1px solid #ACADAC;
padding: 0;
outline: none;
-webkit-appeareance: none;
}
select.awesome_select option {
padding: 5px;
background-color: #FF0000;
-webkit-appearance: none;
}
If I have a regular select (without using the size attribute) I can style this however I'd like. WITH the size attribute, the options suddenly are not able to be modified in any way.

Since you're open to use jQuery and since original SELECT doesn't suit your need, I suggest using Selectable from jQueryUI
If this doesn't suit you, Google for others, but search for "listbox" (e.g. "jQuery listbox), you will find alternatives like http://kalnitsky.org/projects/listbox.js/en/.
Most of them won't convert your existing SELECT element into a new one, but there're some that would.

give a class to the select element and do your css there.
<select class="classname" size="5">
<option>1</option>
<option>2</option>
</select>
//css
.classname {width:0;
height:0;
background:# ;//etc }