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;
}
Related
function setError(input, message) {
const form = input.parentElement;
const small = form.querySelector('small');
small.innerText = message;
form.className = 'inputfield error';
}
function setSuccess(input) {
const form = input.parentElement;
form.className = 'inputfield success';
}
Here is my JavaScript code for setting error or success to the input fields. It is working fine for the inputs.
but when I am trying to apply the same code for custom select boxes it is not working. I am new to web development so any sort of help would be appreciated.
reference Input Field Code :
<div class="inputfield">
<label>NID</label>
<input type="text" value="" class="input" id="nid" onkeyup="checkNid()">
<small>Error Message</small>
</div>
reference Custom Select Code :
<div class="inputfield">
<label>Gender</label>
<div class="custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
</div>
<small>Error Message</small>
</div>
Here is the output. I am expecting the same sort of error message for the select fields too:
output
Replace your reference Custom Select Code with this:
<div>
<label>Gender</label>
<div class="inputfield custom_select">
<select name="gender" id="gender">
<option value="">Select</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="Others">Others</option>
</select>
<small>Error Message</small>
</div>
</div>
If you had shared your CSS file, I would have suggested how to style it better.
.wrapper .form .inputfield .custom_select {
position: relative;
width: 100%;
height: 37px;
}
.wrapper .form .inputfield .custom_select:before {
content: '';
position: absolute;
top: 12px;
right: 10px;
border: 8px solid;
border-color: #d5dbd9 transparent transparent transparent;
pointer-events: none;
}
.wrapper .form .inputfield .custom_select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
width: 100%;
height: 100%;
border: 0px;
padding: 8px 10px;
font-size: 15px;
border: 1px solid #d5dbd9;
border-radius: 3px;
}
helere is the css for the custom selection
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>
I am trying to reduce the opacity of a table (with class="test") whenever a checkbox that is within the table is checked. For some reason, only the checkbox itself fades. I don't understand what I'm doing wrong. My code is below. Thanks for the help.
table.test input[name="delete_record[]"]:checked {
opacity: 0.5;
}
<table class="test" cellpadding="10" cellspacing="0" align="center" bgcolor="#9CDEEC" border="0" style="margin-bottom: 16px;border-radius: 4px;border: 1px solid #555555;">
<!-- Transactions table -->
<tbody>
<tr>
<td>
<input style="width: 90px;" type="text" class="datepicker" name="date[]" required="" value="01/09/1970">
</td>
<td>
<input type="text" name="payee[]" required="" value="Hateful!">
</td>
<td rowspan="2" align="left" valign="top">
<a title="Memo: They're customer service is astounding.">
<textarea rows="3" style="text-align: left; border: 1px solid #AAAAAA; width: 200px; background-color: #FFFFFF; padding: 3px;" name="memo[]">They're customer service is astounding.</textarea>
</a>
</td>
<td>
<select name="reconciled[]">
<option value="R" selected="selected">R</option>
<option value=""></option>
<option value="C">C</option>
<option value="R">R</option>
</select>
</td>
<td>
<input style="width: 100px; text-align: right;" type="number" step="0.01" name="deposit[]" size="4" min="0" max="100000000" value="">
</td>
<td>
<input style="width: 100px; text-align: right;" type="number" step="0.01" name="withdrawal[]" size="4" min="0" max="100000000" value="37.00">
</td>
<input type="hidden" name="record_id[]" value="95">
<td rowspan="2" align="center" valign="middle">
<input type="checkbox" name="delete_record[]" value="95">
</td>
</tr>
<tr>
<td>
<input style="width: 60px;" placeholder="Check #" type="number" step="1" min="0" max="1000000000" name="check_number[]" value="110">
</td>
<td>
<select name="category[]" style="width: 200px;">
<option value="1" selected="selected">Business: Advertising</option>
<option value="42">Business</option>
<option value="1">Business: Advertising</option>
<option value="2">Business: Assets</option>
<option value="24">Business: Automotive: Auto Insurance</option>
<option value="25">Business: Automotive: Auto Loan</option>
<option value="26">Business: Automotive: Repairs</option>
<option value="27">Business: Automotive: Fuel</option>
<option value="28">Business: Automotive: Parking and Tolls</option>
<option value="29">Business: Automotive: Registration</option>
<option value="30">Business: Automotive: Vehicle Leasing</option>
<option value="31">Business: Automotive: Wash and Road Services</option>
<option value="3">Business: Commissions and Fees</option>
<option value="4">Business: Contract Labor</option>
<option value="23">Business: H.S.A. Contrbutions</option>
<option value="22">Business: Health Insurance Premiums</option>
<option value="10">Business: Home Office Other Expenses</option>
<option value="12">Business: Home Office Rent and Lease</option>
<option value="37">Business: Home Office Repairs and Maintenence</option>
<option value="5">Business: Insurance</option>
<option value="32">Business: Interest Paid: Business Loan</option>
<option value="33">Business: Interest Paid: Business Mortgage</option>
<option value="34">Business: Interest Paid: Credit Card</option>
<option value="35">Business: Interest Paid: Home Office Mortgage</option>
<option value="6">Business: Legal and Professional Services</option>
<option value="7">Business: Materials and Supplies</option>
<option value="8">Business: Meals and Entertainment</option>
<option value="9">Business: Office Expenses</option>
<option value="11">Business: Rent and Lease</option>
<option value="36">Business: Repairs and Maintenence</option>
<option value="13">Business: Taxes and Licenses: Licenses</option>
<option value="14">Business: Taxes and Licenses: Property Tax</option>
<option value="15">Business: Taxes and Licenses: Estimated Taxes</option>
<option value="16">Business: Taxes and Licenses: Federal Tax</option>
<option value="17">Business: Taxes and Licenses: Home Office Property Tax</option>
<option value="18">Business: Taxes and Licenses: State Tax</option>
<option value="19">Business: Travel</option>
<option value="20">Business: Utilities: Utilities</option>
<option value="21">Business: Utilities: Home Office Utilities</option>
<option value="43">Personal</option>
<option value="51">Personal: Automotive</option>
<option value="52">Personal: Charity and Donations</option>
<option value="53">Personal: Child Care</option>
<option value="54">Personal: Clothing</option>
<option value="55">Personal: Education</option>
<option value="56">Personal: Entertainment</option>
<option value="48">Personal: Furnishings</option>
<option value="63">Personal: Gift</option>
<option value="44">Personal: Groceries</option>
<option value="47">Personal: Health and Fitness</option>
<option value="57">Personal: Home Maintenance and Repairs</option>
<option value="50">Personal: Insurance</option>
<option value="58">Personal: Medical</option>
<option value="59">Personal: Mortgage</option>
<option value="49">Personal: Pets</option>
<option value="60">Personal: Property Tax</option>
<option value="61">Personal: Rent</option>
<option value="46">Personal: Resturants</option>
<option value="62">Personal: Travel and Vacation</option>
<option value="45">Personal: Utilities</option>
<option value="38">Transfer: Bank to Bank</option>
<option value="39">Transfer: Credit Card Payment</option>
<option value="40">Transfer: Owner's Deposit</option>
<option value="41">Transfer: Owner's Withdrawal</option>
</select>
</td>
<td colspan="3" align="right" valign="middle" style="padding-right: 20px;">
<!-- Accounts Selector -->
<select name="bank_account[]">
<option value="19">Chroot Checking</option>
<option value="10">Main Checking</option>
<option value="19">Chroot Checking</option>
</select>
</td>
</tr>
</tbody>
</table>
As you can't change the parent's opacity using CSS, you would need to use JavaScript.
document.querySelector('input[name="delete_record[]').addEventListener('click', function() {
var d = document.querySelector('table.test');
if(this.checked) {
d.style.opacity = 0.5;
} else {
d.style.opacity = 1;
}
});
This toggles the opacity as well.
Example here.
To only affect the parent table, and using a class to toggle as suggested by #abluejelly, you could do:
document.querySelector('input[name="delete_record[]').addEventListener('click', function() {
var d = this.parentNode.parentNode.parentNode; // the table
d.classList.toggle('halfOpacity', this.checked);
});
You would need a CSS class:
.halfOpacity {
opacity: 0.5;
}
for that to work.
Example here.
If you have multiple tables though you would need to try something like:
var tables = document.querySelectorAll('input[name="delete_record[]');
for(var i = 0, l = tables.length; i < l; i++) {
tables[i].addEventListener('click', function() {
var d = this.parentNode.parentNode.parentNode; // the table
d.classList.toggle('halfOpacity', this.checked);
});
}
which loops through all your tables and assigns the click event listener to the checkboxes.
Example here.
This will reduce the table opacity whenever a checkbox that is within the table is checked.
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var table = document.querySelector('table.test');
var oneIsChecked = false;
for(var i=0; i<checkboxes.length; i++){
checkboxes[i].addEventListener("click", function(e) {
oneIsChecked = false;
for(var j=0; j<checkboxes.length; j++){
if(checkboxes[j].checked) {
oneIsChecked = true;
break;
}
}
if(oneIsChecked){
table.style.opacity = 0.5;
}else{
table.style.opacity = 1;
}
});
}
table.test input[name="delete_record[]"]:checked
This selector says: match a checked input element with its name attribute set to "delete_record[]", that is a descendant of a table element with class test. Put simply, this CSS selector refers to your input element, not your table element (which is one of its parents instead).
For a pure CSS-based solution you would need a "has-descendant" or "has-child" operator, which is unfortunately not supported in CSS3. You will therefore need to resort to JavaScript and watch for when your input changes, then progammatically set opacity (or whatever you need):
document.querySelector('input[name="delete_record[]"]')[0].addEventListener('change', function () {
var tableElement = document.querySelector('table.test')[0];
if (this.checked) {
tableElement.style.opacity = 0.5;
} else {
tableElement.style.opacity = 1;
}
});
You will of course also need to match the initial table opacity to the initial checked state of your input.
Note however, that opacity is effectively inherited from a visual perspective.
Your checkbox is only fading because that is what your CSS selector is targeting.
Unfortunately, CSS cannot do what you're asking. You can only target elements that are preceded by others, not followed by.
You can use other methods to conditionally apply a class to your table and style it accordingly. jQuery is a simple solution, but the best option depends on what languages you're using.
You can do it simply using CSS as well, follow the below instructions:
step #1: copy and paste the below code in a separate file to see the result, then use it for your own purpose.
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #001925;
}
.list {
padding: 30px 75px 10px 30px;
position: relative;
background: #042b3e;
border-top: 50px solid #03a9f4;
}
.list h2 {
color: #fff;
font-size: 30px;
padding: 10px 0;
margin-left: 10px;
display: inline-block;
border-bottom: 4px solid #fff;
}
.list label {
position: relative;
display: block;
margin: 40px 0;
color: #fff;
font-size: 24px;
cursor: pointer;
}
.list input[type="checkbox"] {
-webkit-appearance: none;
}
.list i {
position: absolute;
top: 0;
display: inline-block;
width: 25px;
height: 25px;
border: 2px solid #fff;
left: 0;
}
.list input[type="checkbox"]:checked ~ i {
top: 1px;
border-top: none;
border-right: none;
height: 15px;
width: 25px;
transform: rotate(-45deg);
}
.list span {
position: relative;
left: 40px;
transition: 0.5s;
}
.list span:before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: #fff;
transform: translateY(-50%) scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
.list input[type="checkbox"]:checked ~ span:before {
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
.list input[type="checkbox"]:checked + span {
opacity: 0.2;
transform: translateY(-50%) scaleX(1);
transform-origin: left;
transition: transform 0.5s;
}
input[type=checkbox] + label {
color: #ccc;
font-style: italic;
}
input[type=checkbox]:checked + label {
color: #f00;
font-style: normal;
opacity: 0.2;
}
<DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Check List</title>
</head>
<body>
<div class="list">
<h2>Check list in HTML & CSS</h2>
<label>
<input type="checkbox" name="">
<span>HTML stand for Hyper text markup language</span>
<i></i>
</label>
</div>
</body>
</html>
In jQuery you can do something like
if ($('input[name="delete_record[]"]').is(':checked')) {
$('table.test').css('opacity', 0.5);
}
$('input[name="delete_record[]"]').click(function(){
$(this).is(':checked')) {
$('table.test').css('opacity', 0.5);
}
});
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/