I'm using select2 for custom select box. But I can't change select option icon. Is it possible to change icon dynamically using jQuery ?
I find icon in Dom ...
<span class="select2-item"><i class="ico-status-pending"></i> <span>Pending</span></span>
My html ..
<div class="aside-head__status-item">
<div class="select2-wrap">
<select class="select2-img" data-width="100%">
<option value="ico-status-pending" selected>Pending</option>
<option value="ico-status-open">Open</option>
<option value="ico-status-resolved">Resolved</option>
<option value="ico-status-close">Closed</option>
</select>
</div>
</div>
Not sure if i understand you correctly
If you want to change dynamically the icon, you could trigger the select2 with the desired icon class:
for example:
$('.select2-img').val("ico-status-resolved").trigger("change")
if you want to use selector directly in the DOM, you could use:
$(".select2-item i").removeClass().addClass("ico-status-open");
$(".select2-item span").text("Open");
of course the solution is different if $(".select2-item") is not uniq..
Not sure if i understand you correctly, do you mean the icon arrow down which is displayed in the right corner of the option menu?
If so, then you can change it like this:
$('.select2-img').select2();
.select2-container--default .select2-selection--single .select2-selection__arrow b {
background-image: url(https://www.iconninja.com/files/664/91/782/small-arrow-down-icon.png);
background-color: transparent;
background-size: contain;
border: none !important;
height: 20px !important;
width: 20px !important;
margin: auto !important;
top: auto !important;
left: auto !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-rc.0/dist/js/select2.min.js"></script>
<span class="select2-item"><i class="ico-status-pending"></i> <span>Pending</span></span>
<div class="aside-head__status-item">
<div class="select2-wrap">
<select class="select2-img" data-width="80%">
<option value="ico-status-pending" selected>Pending</option>
<option value="ico-status-open">Open</option>
<option value="ico-status-resolved">Resolved</option>
<option value="ico-status-close">Closed</option>
</select>
</div>
</div>
Rather than hack away at select2's DOM elements, select2 provides an API exactly for your requirements, the templateSelection option.
Your original code doesn't indicate how the icons are displayed/generated, only that the option has a value= that appears to correspond to your icons (the image also shows them in a different order).
To set how the drop down is displayed after you select an option, use this:
$('.select2-img').select2({
templateSelection: function(data, container) {
if (data == null || !container) return null;
return $("<i class='" + data.id + "'></i>");
}
});
where data.id = the option's value=
if you return a jQuery object, then it will be output as-is, otherwise will be output using .text() (and thus remove any html)
Related
I'm trying to populate a dropdown menu (select-option) in html that retrieves the options from a css file.
To do that, I defined a custom class for each option and I wrote the option label in the css file with a CUSTOM_CLASS::after{content: "";} statement.
For instance, here is the definition of an option of the dropdown:
<option class="OPTION1_LABEL"></option>
And here is the css:
.OPTION1_LABEL::after{content: "Option 1";}
.DROPDOWN_TITLE::after {
content: "Select option from dropdown";
}
.OPTION1_LABEL::after {
content: "Option 1";
}
.OPTION2_LABEL::after {
content: "Option 2";
}
.OPTION3_LABEL::after {
content: "Option 3";
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col">
<span class="input-group-text DROPDOWN_TITLE"></span>
</div>
<div class="col">
<select class="form-control" id="myDropdown">
<option class="OPTION1_LABEL"></option>
<option class="OPTION2_LABEL"></option>
<option class="OPTION3_LABEL"></option>
</select>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
https://jsfiddle.net/fm623k48/
However, the dropdown menu doesn't get populated. How can I solve?
Select is a control element and browsers mostly ignore :before and :after for control elements and their children. So most likely it's not possible. In case you can't edit your HTML you can try to populate select using JS.
Alternatively if you really need to populate select using CSS pseudo content you can try using getComputedStyle() method, but it's also JS
I have a div with some content that gets hide after 5 seconds but below it, I have a drop-down with some options. So what happens when the select box is open and at the same time the div gets hidden, the options box remains in the same place and doesn't shift upwards with the select box.
Creating a custom drop-down is not an option. As well as making the above div absolute or fixed. Making the drop-down blur is also not an option. Can someone tell me if this default behaviour can be somehow changed?
The client does not agree for a custom solution.
The client does not want the above div to float or position absolute or fixed. He wants the same setup but this thing fixed.
Closing the select box or using blur() is also not that the client wants.
<!DOCTYPE html>
<html>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<body>
<div class='war'>SOME RANDOM CODE which gets hidden after 5 seconds. Make sure to open the drop down</div>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<script>
setTimeout(function(){ $(".war").hide(); }, 3000);
</script>
</body>
</html>
How about this workaround:
- When the select menu is clicked, it gets a size attribute that is as big as all its containing option elements so that it moves with the element in the window, as it disappears.
- If you add some css styling it does not become apparent to the user that the size of the selection element has changed while he/she is in the process of selecting an option.
- Unfortunately the standard arrow styling is different, depending on the browser. My solution looks best in chrome but not optimal in firefox for example - so further browser specific optimization should be added.
Here is the corresponding code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>example</title>
<style>
#box {
width: 100px;
height: 100px;
border: 1px solid black;
}
#options {
overflow: hidden;
}
#first::after {
content: " ⯆ ";
font-size: 10px;
}
</style>
</head>
<body>
<div id="box"></div>
<select name="selectionarea" id="options" onclick="makeBoxDisappear();expandSelect()" onfocusout="minimizeSelect()">
<option value="option1" id="first">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
<option value="option4">option4</option>
<option value="option5">option5</option>
</select>
<script>
function makeBoxDisappear() {
setTimeout(() => document.getElementById("box").style.display = "none", 1000);
}
function expandSelect() {
document.getElementById("options").size="5";
}
function minimizeSelect() {
document.getElementById("options").size="1";
}
</script>
</body>
</html>
In my code I am using bootstrap css for styling . I have written a code for a drop down menu with class form-control. The problem is that I cant adjust the width of the form. It is now like occupying the total width of the webpage like:
--------------------------------------------------------------------------------------------------------| Choose the option
I just need to adjust the size of the dropdown . I am totally new to this field .
Somebody can help me out .?
I am attaching the part of code with this :
<body>
<select class="form control">
<option value= "1">one</option>
<option value= "2">two</option>
<option value= "3">three</option>
</select>
</body>
bootstrap link
Well, if you are using Bootstrap, the class .form-control by default has the following properties:
.form-control {
position: relative;
z-index: 2;
float: left;
width: 100%;
margin-bottom: 0;
}
So, if you are using bootstrap you will have to override it using a custom class/id, or set a parent with a fixed width.
HTML
<div class="form-container">
<select class="form control">
<option value= "1">one</option>
<option value= "2">two</option>
<option value= "3">three</option>
</select>
</div>
CSS
.form-container{
width: 30%; //or width: 200px, etc
}
You can try using the bootstrap grid system. Adding a pre-defined responsive class like "col-xs-4" to your class list for the select element. (note this will only cover your width requirement, but if all elements use the grid system is can help keep the form looking clean and well organized).
A helpful reference for the bootstrap grid system may be found here http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Link your own stylesheet to the document...
Declare the class form-control in this document.. or add a new class to the html next to this, then add the height/width attributes:
Html:
<select class="form-control resizeformc">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">three</option>
</select>
CSS:
.resizeformc {
width: 150px;
height:200px;
}
I have a listbox and I want to decrease its width.
Here is my code:
<select name="wgtmsr" id="wgtmsr" style="width: 50px;">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
This code works on IE 6 but not in Mozilla Firefox (latest version). Can anybody please tell me how I can decrease the width of the dropdown list on Firefox?
Try this code:
<select name="wgtmsr" id="wgtmsr">
<option value="kg">Kg</option>
<option value="gm">Gm</option>
<option value="pound">Pound</option>
<option value="MetricTon">Metric ton</option>
<option value="litre">Litre</option>
<option value="ounce">Ounce</option>
</select>
CSS:
#wgtmsr{
width:150px;
}
If you want to change the width of the option you can do this in your css:
#wgtmsr option{
width:150px;
}
Maybe you have a conflict in your css rules that override the width of your select
DEMO
The dropdown width itself cannot be set. It's width depend on the option-values. See also here ( jsfiddle.net/LgS3C/ )
How the select box looks like is also depending on your browser.
You can build your own control or use Select2
https://select2.org
This:
<select style="width: XXXpx;">
XXX = Any Number
Works great in Google Chrome v70.0.3538.110
try the !important argument to make sure the CSS is not conflicting with any other styles you have specified. Also using a reset.css is good before you add your own styles.
select#wgmstr {
max-width: 50px;
min-width: 50px;
width: 50px !important;
}
or
<select name="wgtmsr" id="wgtmsr" style="width: 50px !important; min-width: 50px; max-width: 50px;">
Create a css and set the value style="width:50px;" in css code. Call the class of CSS in the drop down list. Then it will work.
If you want to control the width of the list that drops down, you can do it as follows.
CSS
#wgtmsr option {
width: 50px;
}
You can style it on your CSS file using the id = #wgtmsr.
#wgtmsr{
width: 50px;
}
And then remove the style element = 'style="width: 50px;"'
Is it Possible to keep the background-image for drop down box using CSS.
For Textbox is getting correctly.
can anybody give sample example
Yes is possible. You can style the elements not the select box, as the select box gives only the line when you selected something.
try this css:
<style>
.green { background:green}
.red { background:red}
.blue{background:blue}
</style>
and this html:
<form>
<select class='green'>
<option class='red'>A</option>
<option class='blue'>B</option>
</select>
</form>
You will see that the main line is green and the options are colored each one to its colour. You can also attach images to the background for each css class.
Here you go
<select>
<option>One</option>
<option>Two</option>
<option>More ... </option>
</select>
css
select {
background: url("https://fastly.picsum.photos/id/1031/200/300.jpg?hmac=HVS-5o6kRugo6EcoZhPEsxm8Jnl7-J5tuEc20pN029c") repeat-x 0 0;
}