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>
Related
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)
I've started to work with jQuery Mobile, and I'm facing a problem that in a regular HTML code it is effortless to solve.
The problem:
I am trying to split the page like in the picture below-
On the left page, I want to add a dropdown list (that's not the problem), and on the right of the screen I want to add the "Age" and two text boxes in the same line but it does not let me add everything in the same line.
My question, is there an easy way to it, for example like Bootstrap?
What is the best way to combine features inline in jQuery Mobile?
Thanks.
Inline works, give a look to the JQM form gallery: http://demos.jquerymobile.com/1.4.5/forms/
Beside that, You are right to ask, because JQM has its own way of life. You can try grids documented here.
Default grid cells are evenly distributed, but You can override the default width easily. Moreover, by using the ui-responsive class the grid will be responsive by stacking the grid blocks at narrow widths.
Here is a playground:
.ui-grid-a > .ui-block-b {
text-align: right;
}
.ui-grid-solo > .ui-block-a {
white-space: nowrap;
}
.ui-mobile .ui-grid-solo label {
display: inline;
}
.ui-grid-solo .ui-input-text {
width: 30%;
display: inline-block;
margin-right: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
<div data-role="page">
<div role="main" class="ui-content">
<div class="ui-grid-a ui-responsive">
<div class="ui-block-a">
<select data-native-menu="false">
<option value="1">The 1st Option</option>
<option value="2">The 2nd Option</option>
<option value="3">The 3rd Option</option>
<option value="4">The 4th Option</option>
</select>
</div>
<div class="ui-block-b">
<div class="ui-grid-solo">
<div class="ui-block-a">
<label for="textinput-3">Range:</label>
<input name="textinput-3" id="textinput-3" placeholder="Text input" value="" type="text">
<label for="textinput-4">-</label>
<input name="textinput-4" id="textinput-4" placeholder="Text input" value="" type="text">
</div>
</div>
</div>
</div>
<hr>
</div>
</div>
</body>
</html>
I have one issue in multiple selection box. I have a container of fixed size inside the container I am writing a multiple selection box.
The option values has long descriptive data. So I need to give overflow-x : auto to select any data and scroll horizontally to read the content .
when I select any data and try to scroll horizontally,to read the whole content, the other part of information which should be visible is not visible(which was not visible as we need to scroll).
Please paste this sample code and select any data and try to horizontally scroll and you see the information is partially selected.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Application</title>
<style type="text/css">
.test{
width:300px;
}
select{
width: 100%;
overflow-x: scroll;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js" charset="utf-8"></script>
</head>
<body>
<div class="test">
<select name="myMultipleTest" id="myMultipleTest" multiple="multiple">
<option value="A101">This is a sample long text which contains some information</option>
<option value="A102">This is a sample long text which contains some information, which might contain some information which is long in description</option></select>
</div></body>
</html>
here it's working
.test {
width: 300px;
}
select {
width: 200px;
}
select option {
width: 100%;
overflow-x: auto;
}
<div class="test">
<select name="myMultipleTest" id="myMultipleTest" multiple="multiple">
<option value="A101">This is a sample long text which contains some information</option>
<option value="A102">This is a sample long text which contains some information, which might contain some information which is long in description</option>
</select>
</div>
I guess your problem was that the select box didn't have any fixed width and you was changing the select's overflow-x instead of options'
anyway I suggest you to use some library to make tooltips for more info instead of putting a long inside of a option , I'd prefer hint.css
I have many <option>. One of them has a long text and I want to split it into two lines but when I click on that (to get the text via JavaScript) it should act as a single line .
give your li links display:inline-block style
<li><a style="display:inline-block" href="#somewhere">line1<br>line2</a></li>
i find out the solution this code works fine in Firefox :-
<style>
#wgtmsr{
width:50px;
}
#wgtmsr option{
width:50px;
}
#wgmstr {
max-width: 40px;
min-width: 40px;
width: 50px !important;
}
</style>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<select name="wgtmsr" id="wgtmsr">
<option value="value1">value1</option>
<option value="value2">value2</option>
<option value="value3">value3</option>
<option value="value4">value4 ton</option>
<option value="value5">value5</option>
<option id="wgtmsr" value="ounce">Ounce111111111111111111111111111</option>
</select>
</BODY>
</HTML>
I have a asp:DropDownList with fixed width of 150px, but its list items are not enough to fit in 150px width, so it get cut off in IE (works fine in other browsers)
I search about this, but only got solution for html SELECT.
set a css class for your dropdownlist and then set width to that css class
<style>
.myDropDown
{
width : 150px;
}
</style>
<asp:DropDownList CssClass="myDropDown"></asp:DropDownList>
EDIT
so you must remove width attribute from your dropdownload. then it will be resized depending on items size.
<script type='text/javascript'>
function SetWidthToAuto(drpLst) {
drpLst.style.width = 'auto';
}
function ResetWidth(drpLst) {
drpLst.style.width = '150px';
}
</script>
<div style="width:150px;overflow:hidden;">
<select id="drpTechnology" style='width:150px' onchange='ResetWidth(this)' onblur='ResetWidth(this)' onmousedown='SetWidthToAuto(this)'>
<option value="-1">Browse me..</option>
<option value="1">Short Option</option>
<option value="2">Little bigger than short Option</option>
<option value="3">Largest option available with this select box</option> </select> <div>