Updated
I have set the "height: auto;" property via style on both the fieldset and select elements, however it still results in the select box having the original height specified in the CSS for "fieldset select" which is 20px. If I change that to "auto" in the CSS it works, but as I need to override it, I am at a loss as to what is causing this.
<fieldset style="width:62%; float:left; margin-left: 19%; height: auto; !important">
<select style="height: auto; !important" name="searchable[]" id='searchable' multiple='multiple' size='10' >
<option value='1'>127.0.0.1</option>
<option value='2'>127.0.0.5</option>
<option value='3'>127.0.0.10</option>
<option value='4'>127.0.0.15</option>
<option value='5'>127.0.0.20</option>
<option value='6'>127.0.0.25</option>
<option value='7'>127.0.0.30</option>
<option value='8'>127.0.0.35</option>
<option value='9'>127.0.0.40</option>
<option value='10'>127.0.0.45</option>
<option value='11'>127.0.0.50</option>
<option value='12' SELECTED>127.0.0.55</option>
<option value='13' SELECTED>127.0.0.60</option>
</select>
</fieldset><div class="clear"></div>
it should be:
fieldset select.clearheight{
height: auto;
}
You need to chain select and .clearheight
If you need to increase the priority then try this (keep in mind this is bad practice):
fieldset select.clearheight{
height: auto; !important
}
Hope this helps.
changes, you have added space between select .clearheight
/\
fieldset select .clearheight{
height: auto;
}
to
fieldset select.clearheight{
height: auto;
}
Try it,
<fieldset style="width:62%; float:left; margin-left: 19%;height:auto !important">
Use 2 classes and use addClass and removeClass from jquery to toggle them.
Try this:
HTML:
<select class="clearheight" name="searchable[]" id='searchable' multiple='multiple' size='10' >
<option value="1">A</option>
<option value="1">B</option>
<option value="1">C</option>
</select>
</fieldset>
CSS:
fieldset select {
width: 96%;
margin: 0 10px;
border: 1px solid #bbb;
height: 20px;
color: #666666;
}
fieldset .clearheight{
height: auto;
}
Check this out: http://jsfiddle.net/78Fu4/
Related
I am trying to add select box where user can select the option from a predefined set or enter a custom value. The select element is inside a table. unfortunately datalist is not going to work for me. I modified the solution found in HTML select form with option to enter custom value to fit my needs and it almost works except when I select 'Enter Option' (to type the custom value) the cell height doubles. How can I keep the table cell height same? I am hoping some simple css trick. Here is my http://jsfiddle.net/oyb2Lgvr/
Thanks in advance for all your help. code below:
<table id="tid">
<tbody>
<tr>
<td>column1</td>
<td>
<select>
<option class="non" value="option1">Option1</option>
<option class="non" value="option2">Option2</option>
<option class="non" value="option3">Option3</option>
<option class="editable" value="">Enter Option</option>
</select>
<input class="editOption" style="display:none;" placeholder="Enter Value"></input>
</td>
</tr>
<tr>
<td>column1</td>
<td>
<select>
<option class="non" value="option1">Option1</option>
<option class="non" value="option2">Option2</option>
<option class="non" value="option3">Option3</option>
<option class="editable" value="">Enter Option</option>
</select>
<input class="editOption" style="display:none;" placeholder="Enter Value"></input>
</td>
</tr>
</tbody>
</table>
javascript
$('#tid > tbody > tr > td:nth-child(2)').change(function() {
var selected = $('option:selected', this).attr('class');
if (selected == "editable") {
$(this).find('.editOption').show();
$(this).find('.editOption').keyup(function() {
var editText = $(this).find('.editOption').val();
$(this).find('.editable').val(editText);
$(this).find('.editable').text('Enter Option');
});
} else {
$(this).find('.editOption').hide();
}
});
CSS
#tid td {
border-collapse: collapse;
border: 1px solid black;
width: 80px;
max-height: 5px;
}
.editOption {
width: 80%;
position: relative;
top: -20px;
border: 0;
padding-left: 5px;
}
You could make .editOption absolutely positioned, like this:
.editOption {
width: 80px;
position: absolute;
left: 0;
border: 0;
padding-left: 5px;
}
UPDATE: To make this work with multiple columns in the table, assign a non-static position to td so that .editOption lies within the table cell.
#tid td {
position: relative;
border-collapse: collapse;
border: 1px solid black;
width: 80px;
max-height: 5px;
}
I recently created the Dropdown which lists a number of states, and every option points to a different page. The button is not functional, it selects the elements, and won't redirect me to a the page I selected.
Every time I click the button, nothing happens.
How can I make this work?
<head>
<style>
.state-drop
{
height: auto;
display: inline-block;
width: auto;
padding:1px 35px;
background-image:linear-gradient(to right, #044A04, #00B300) ;
border-radius: 50px;
}
.state-drop select
{
background-color: transparent;
color:#fff;
border:none;
outline: none;
font-size: 20px;
min-height: 48px;
padding:0px 25px 0px 0px;
}
.state-drop select option:disabled
{
background-color:#ddd;
color:#999;
}
.state-drop select option{
color:#525252;
}
</style>
</head>
<body>
<div class="state-drop">
<select name="states" class="state-select">
<option selected="">Select Your State</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-arkansas/">Arkansas</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-california/">California</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-florida/">Florida</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-georgia/">Georgia</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-hawaii/">Hawaii</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-illinois/">Illinois</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-maryland/">Maryland</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-minnesota/">Minnesota</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-missouri/">Missouri</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-michigan/">Michigan</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-nevada/">Nevada</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-new-jersey/">New Jersey</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-new-york/">New York</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-ohio/">Ohio</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-oklahoma/">Oklahoma</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-puerto-rico/">Puerto Rico</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-pennsylvania/">Pennsylvania</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-virginia/">Virginia</option>
<option value="https://mymmjdoctor.com/medical-marijuana-card-washington-dc/">Washington DC</option>
</select>
</body>
It seems that you are trying to go to next page just on selecting the value from the dropdown.
To get the above scenario working you can use the onchange event to redirect to the new url.
just add
<select name="states" class="state-select" onchange="location = this.value;">
Demo: https://jsfiddle.net/a26jkhns/3/
How to change span color to red in select option?
in js fiddle i want to change color of <span class="myError">This is a required field.</span> to red color
select{
color: green;
}
select option { color: black; }
select option .myError{
color:red
}
<select >
<option value="">Color:
<span class="myError">This is a required field.</span>
</option>
<option value="17">Color: Midnight Blue</option>
<option value="18">Color: Radar Red</option>
</select>
Here is a fancy idea using an overlay above the select and mix-blend-mode, then I control the change of color using CSS varibale.
$('select').change(function(){
$(this).parent().attr('style','--color:'+$(this).find(':selected').data('color'));
})
.select {
position: relative;
display: inline-block;
--color:red;
}
.select:before {
content: "";
position: absolute;
right: 20px;
top: 1px;
bottom: 1px;
left: 40px;
background: var(--color);
mix-blend-mode: lighten;
}
select option {
color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
<select>
<option value="" disabled selected>Color: This is a required field. </option>
<option value="17" data-color="blue">Color: Midnight Blue</option>
<option value="18" data-color="pink">Color: Radar Red</option>
</select>
</div>
After rendering DOM you can inspect element it, you will see span will be remove. That's why css style properties are not working because there is not span or class .myError exist.
In other words option tag cannot allow other tags.
You cannot use a html tag inside <option> tag. However you can achieve this using css:
select{
color: red;
}
select option { color: black; }
select option:first-child{
color:red
}
.mid-blue{
color: #0000CD;
}
.radar-red{
color: #FF0000;
}
<select >
<option value="">Color:This is a required field
</option>
<option class='mid-blue' value="17">Color: Midnight Blue</option>
<option class='radar-red' value="18">Color: Radar Red</option>
</select>
I've an HTML select where I want to achieve something when I select any option from the select menu it should not show those selected option into the box instead it has to show the first option always regardless of whatever user chose from the option inside.
Here is my CSS code for the div and Select:
.styled select {
background: transparent;
width: 140px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
width: 40px;
height: 34px;
border: 1px solid #46b8da;
border-radius: 3px;
overflow: hidden;
background-color: #5bc0de;
}
<div class="styled">
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>
</div>
Here, from the above code you can see that the dropdown box or the div is actually smaller than the select menu (which is required in my case) which matches with the first option {} but if I chose any other option from the below then most of the text is getting cut which is not good looking that's why I need your help or suggestion to know how to achieve this. Thanks.
Thanks everyone for taking time to read my question and for your valuable suggestion. But here I've found a solution to my problem. Now, I'm using a javascript function which will make the selectedIndex = 0 after each selection made.
here is the code:
function drpChanged(ddl) {
var drpInsertMerge = document.getElementById("drpInsertMerge");
var selectedText = drpInsertMerge.options[drpInsertMerge.selectedIndex].innerHTML;
var selectedValue = drpInsertMerge.value;
drpInsertMerge.selectedIndex = 0;
return false;
}
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>
Thanks again everyone.
way that you are going to design is wrong.This might be a way to increase the width of your styled class in css.
.styled select {
background: transparent;
width: 500px;
font-size: 16px;
border: 1px solid #ccc;
height: 34px;
}
.styled {
width: 300px;
height: 34px;
border: 1px solid #46b8da;
border-radius: 3px;
overflow: hidden;
background-color: #5bc0de;
}
<div class="styled">
<select id="drpInsertMerge" onchange="drpChanged(this);">
<option selected>{}</option>
<option value="Phone Number">Phone Number</option>
<option value="Email Address">Email Address</option>
<option value="Given Name">Given Name</option>
<option value="Family Name">Family Name</option>
<option value="Display Name">Display Name</option>
</select>
This is a bit of a weird request, so I haven't seen any examples for it anywhere. Basically I want to 'unfold' a <select> so its options are visible, basically turning it into a toggle, of sorts. Here's my original <select>:
<span><input type="checkbox" className="onlyCheckbox" value={this.state.only}
onChange={this.handleOnlyChange.bind(this)} />
<label htmlFor="onlyIdentityBox">Only</label>
<select value={this.state.operator} onChange={this.handleOperatorChange.bind(this)} >
<option value="AND">AND</option>
<option value="OR">OR</option>
</select></span>
Ideally the solution would be css-only, but I'm not sure if that's possible (I've searched but not found any examples). Here's an image of what I'd like:
Is this doable?
edit: added context for the <select>'s surrounding elements.
To do this with a select box is rather..... odd. But sure it can be done. This should be enough to get you started:
.toggle{
font-size:18px;
height:1.4em;
overflow:hidden;
border:1px solid black;
border-radius:5px;
padding:0px;
box-sizing:border-box;
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
}
.toggle option{
display:inline-block;
float:left;
width:50%;
min-width:50px;
height:100%;
text-align:center;
box-sizing:border-box;
}
<select size='2' class='toggle'>
<option value="AND" selected>AND</option>
<option value="OR">OR</option>
</select>
If You can add some extra markup into your code then you can also try the following code:
Please check the fiddle for Demo. Fiddle Link
HTML
<select id="select-box">
<option value="AND" selected>AND</option>
<option value="OR">OR</option>
</select>
<div class="toggle-effect">
<label class="and">AND</label>
<label class="or">OR</label>
</div>
CSS
select {
margin-bottom: 40px;
}
.and {
border: 1px solid black;
background:red;
color: white;
}
.or {
border: 1px solid black;
background:blue;
color: white;
}
JS
$('.toggle-effect').on('click', '.and,.or', function(){
var textInLabel = $(this).text();
$('#select-box').val(textInLabel);
$('#select-box').trigger('change');
});
After some tinkering around at CodePen I came up with this, I added some JS to add the scroll effect.
var select = document.getElementById('select');
select.addEventListener('mouseup', function(e) {
e.preventDefault();
});
select.addEventListener('mousewheel', function(e) {
select.selectedIndex = select.selectedIndex + 1;
});
select {
overflow: hidden;
size: 2;
height: 18px;
}
option {
display: inline;
}
<select id="select" multiple>
<option>1</option>
<option>2</option>
</select>