I have a select element with options inside that will not show when in Firefox.
This should be showing 3 different options. In Chrome and Safari it works fine. I've been looking for a solution and nothing seems to work. Apparently this is a bug in Firefox. Here's the html.
.select-field {
display: inline-block;
width: 100%;
background-color: #005D5D;
border-radius: .5em;
margin: 0 auto;
}
.select-field>select {
float: left;
width: 100%;
background-color: transparent;
border: 0em;
padding: .5em;
font-size: 1em;
color: white;
background: url("./menu_arrow.svg") no-repeat 97% 50%;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
<div id="games">
<div className="select-field">
<select onChange={this.props.gameProp}>
<option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
<option value="tekken" label="Tekken">Tekken 7</option>
<option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
</select>
</div>
</div>
This works totally fine if I run in Firefox, https://jsfiddle.net/prashu421/8b1w8afr/
can you share your CSS as well?
<div id="games">
<div className="select-field">
<select onChange={this.props.gameProp}>
<option value="streetfighter" label="Street Fighter">Street Fighter 5</option>
<option value="tekken" label="Tekken">Tekken 7</option>
<option value="mvci" label="Marvel vs Capcom: Infinite">Marvel vs Capcom: Infinite</option>
</select>
</div>
</div>
Related
I've tried a few different things to fix this, but I have
#serverselect{
color: white;
background: black;
/*TOP BAR COLOR DOJCAD is #2196f3*/
font-family: Roboto;
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
align-items: center;
}
<select id="server" style= "background-color: #000000 ; color: #FFFFFF" onchange="location = this.value;">
<option value="0" selected disabled>Select A Server</option>
<option value="?server=1">1</option>
<option value="?server=2">2</option>
<option value="?server=3">3</option>
<option value="?server=4">4</option>
<option value="?server=5">5</option>
</select>
</div>
When I make the window smaller, the "banner" clutters up and makes it unusable. See linked images.
Incorrect: https://imgur.com/a/rDOOrAo
Correct: https://imgur.com/a/06VKiYF
I have used datalist function to list my product names, if list goes too long vertical scrolling not display in google chrome and some browsers. Is it possible to add overflow-y: scroll in css style for datalist? Used code below:
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
<option value="abc"></option>
<option value="def"></option>
<option value="ghi"></option>
<option value="jkl"></option>
<option value="mno"></option>
<option value="pqrs"></option>
<option value="tuv"> </option>
</datalist>
<input type="submit">
</form>
There is simple solution for this. Use https://github.com/b3n/datalist plugin.
Example:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="YOURBASE_JS_PATH/src/datalist.js"></script>
var maxHeight = '200px';
var openOnClick = true;
$('input[list]').datalist(maxHeight, openOnClick);
Unfortunately, No you can't use overflow-y property for datalist. You will have to write jQuery code to make it happen or at least show all possible values.
I wrote a small example for you i hope it will help you to get it done for you yourself:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
#options{
display: none;
height: 300px;
text-align: center;
border: 1px solid red;
overflow-y:scroll;
}
#options>p{
margin-top: 10px;
margin-bottom: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="demo_form.asp" method="get">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="a"></option>
<option value="b"></option>
<option value="c"></option>
<option value="d"></option>
<option value="e"></option>
<option value="f"></option>
<option value="g"></option>
<option value="h"></option>
<option value="i"></option>
<option value="j"></option>
<option value="k"></option>
<option value="l"></option>
<option value="m"></option>
<option value="n"></option>
<option value="o"></option>
<option value="p"></option>
<option value="q"></option>
<option value="r"></option>
<option value="s"></option>
<option value="t"></option>
<option value="u"></option>
<option value="v"></option>
<option value="w"></option>
<option value="x"></option>
<option value="y"></option>
<option value="z"></option>
</datalist>
<input type="submit">
<div id="options">
</div>
</form>
<div class="med_rec"></div>
<script>
$('#browsers option').each(function(){
$('#options').append('<p>'+$(this).val()+'</p>');
})
$('#options').css({'width':$('input[name="browser"]').width()});
$('input[name="browser"]').click(function(){
$('#options').show();
});
$('input[name="browser"]').keyup(function(){
$('#options').hide();
});
$('#options p').click(function(){
$('input[name="browser"]').val($(this).text());
$('#options').hide();
})
</script>
</body>
</html>
It actually creates a second option list for you to choose from which is scrollable and if user types in input box then datalist works as expected to give suggestions.
I hope it helps
I have used ComboBox Javascript Component to fix this problem, from: https://www.zoonman.com/projects/combobox/
var no = new ComboBox('cb_identifier');
div.combobox {
font-family: Tahoma;
font-size: 12px
}
div.combobox {
position: relative;
zoom: 1
}
div.combobox div.dropdownlist {
display: none;
width: 200px;
border: solid 1px #000;
background-color: #fff;
height: 200px;
overflow: auto;
position: absolute;
top: 18px;
left: 0px;
}
div.combobox .dropdownlist a {
display: block;
text-decoration: none;
color: #000;
padding: 1px;
height: 1em;
cursor: default
}
div.combobox .dropdownlist a.light {
color: #fff;
background-color: #007
}
div.combobox .dropdownlist,
input {
font-family: Tahoma;
font-size: 12px;
}
div.combobox input {
float: left;
width: 182px;
border: solid 1px #ccc;
height: 15px
}
div.combobox span {
border: solid 1px #ccc;
background: #eee;
width: 16px;
height: 17px;
float: left;
text-align: center;
border-left: none;
cursor: default
}
<script type="text/javascript" charset="utf-8" src="https://www.zoonman.com/projects/combobox/combobox.js"></script>
<div class="combobox">
<input type="text" name="comboboxfieldname" id="cb_identifier">
<span>▼</span>
<div class="dropdownlist">
<a>Item1</a>
<a>Second Item2</a>
<a>Third Item3</a>
</div>
</div>
I spent 3 days. I tried to design step by step progress bar like below.
====(discount 10 %)======(discount 20 %)=====(discount 30 %)========
fill it dynamically how can i do that i searched on google every thing i tried to customize but not success so far.
Thanks
I've just made this to inspire you (not sure if it's what you try to do).
$(document).ready(function() {
$('#discount').on('change', function() {
$('#discount-bar').css({'width' : $(this).val() + '%'});
});
});
select {
margin-bottom: 12px;
}
.discount-bar-container {
position: relative;
width: 400px;
height: 30px;
border: 1px solid black;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
.discount-bar-container .discount-bar {
position: absolute;
display: block;
height: 100%;
width: 0;
background-color: red;
transition: width 0.4s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="discount">Choose a value :</label>
<select name="discount" id="discount">
<option value="0">0%</option>
<option value="10">10%</option>
<option value="20">20%</option>
<option value="30">30%</option>
<option value="40">40%</option>
<option value="50">50%</option>
<option value="60">60%</option>
<option value="70">70%</option>
<option value="80">80%</option>
<option value="90">90%</option>
<option value="100">100%</option>
</select>
<div class="discount-bar-container">
<div class="discount-bar" id="discount-bar"></div>
</div>
I am using IE 10 browser. I have created one drop down menu with some values added to it. Code working fine in Chrome as my requirement but in IE10 drop down values are showing up. How to customize that to look like chrome. and selector(round marked in image) also not looking like the one looks in Chrome.
the above image shows the values in dropdown are showing up in IE10.Ignore any values mismatch inside both dropdowns(they are hardcoded).
Here is my code and both CSS and Jsp are in same file
File.jsp
<div class="row">
<div class="large-5 medium-8 small-12 columns"
id="Area_dropdown_label">
Area of Business
<select class="no-highlight"
id="Area_dropdown" name="Area"
<option value="select" selected="selected">Select</option>
<option value="Drive">Drive</option>
<option value="Front">Front</option>
<option value="Kitchen">Kitchen</option>
<option value="McCafe">McCafe</option>
<option value="Back">Back</option>
</select>
</div>
</div>
.ie #Area_dropdown{
cursor: default;
display: block;
position: relative;
top: 0;
height: 2.3125em;
margin-bottom: 1.25em;
margin-top: 0px;
padding: 0px;
width: 100%;
background: linear-gradient(to bottom, #ffffff0%, #f3f3f3 100%);
box-shadow: none;
font-size: 0.875em;
vertical-align: top;
border: solid 1px #cccccc;
}
if my css code itself wrong then please suggest me to change. Any kind of suggestions/help are welcome and useful for me. Please comment for any clarification on this question.
When using the jquery picklist (from: https://code.google.com/p/jquery-ui-picklist/) I only get one list instead of 2 (left and right). Any ideas?
I almost copy pasted all from http://jsfiddle.net/awnry/ScX4S/
HTML code:
<html>
<head>
<title>TestSite</title>
<link href="./css/test.css" rel="stylesheet">
</head>
<body>
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/test.js"></script>
<div>
<select name="basic" id="basic" multiple="multiple">
<option value="1">Option 1</option>
<option value="2" selected="selected">Option 2</option>
<option value="3">Option 3</option>
<option value="4" selected="selected">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</body>
</html>
JS Code:
$(document).ready(function() {
$("#basic").picklist();
});
CSS Code:
body { margin: 0.5em; }
.pickList_sourceListContainer, .pickList_controlsContainer, `.pickList_targetListContainer { float: left; margin: 0.25em; }`
.pickList_controlsContainer { text-align: center; }
.pickList_controlsContainer button { display: block; width: 100%; text-align: center; }
.pickList_list { list-style-type: none; margin: 0; padding: 0; float: left; width: 150px; height: 75px; border: 1px inset #eee; overflow-y: auto; cursor: default; }
.pickList_selectedListItem { background-color: #a3c8f5; }
.pickList_listLabel { font-size: 0.9em; font-weight: bold; text-align: center; }
.pickList_clear { clear: both; }
In your code, Change
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
to
<script src="./scripts/jquery-1.11.0.js"></script>
<script src="./scripts/jquery.ui.widget.js"></script>
<script src="./scripts/jquery-picklist.js"></script>
Reason : You should include reference jquery UI widget before picklist. (Check the ordering in the fiddle)
The ordering matters as picklist refers the former(jquery UI widget library) for its functionality - Reference.