How to display bootstrap select combo box in datatable? - javascript

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.:)

Related

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;
}

Custom tailor the dropdown menu by select option tags?

My leader told me select option could not be fully custom-tailored. Therefore, I have to use ul li to make the following css style. http://jsfiddle.net/C5mTf/59/
Sorry, the following is partial css had to show per stackoverflow requirement
#menu ul:hover .item:last-child{
border-bottom: 1px solid #cbc5cd;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
The following are requirements:
1. at initial stage, the dropdown menu only show first item with rounded corners.
2. if moving mouse over menu, it will display all items with the whole box rounded corner.
3. After clicking any item or leaving the menu, the dropdown menu will hide all items except selected one
Is there a way to use select and option tags to build the same css appearance?
For cross browser rendering answer is no. There are some jquery plugins that do a lot of dom manipulation for selects, but your menu looks fine. You will end up wasting more time on trying to figure out how to make it look that way.

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

How to give fixed length into chosen.jquery.js plugin?

Have a day I used chosen.jquery.js plugin for my dropdownlist but it get width size automatically please somebody know how to choose a fixed length to my all dropdowlists.
Thanks.!
I have experienced the same problem with you before. I solve this problem with set the width and max-width for the drop down.
<select class="chzn-select" name="chznName" >
...
</select>
<style>
select, option {
width: 500px;
max-width: 500px;
}
</style>
Chosen will create the chosen dropdown with width from the actual dropdown that you create.

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 }

Categories

Resources