focus-within css not working for html label - javascript

I'm trying to build a dropdown list with checkboxes in dropdown area.
Here is the code I'm using:
.search-box {
color: black;
width: 450px;
}
.search-box .fake-tb {
display: flex;
flex-wrap: nowrap;
background: #ffffff;
border: 1px solid #e5e5e5;
box-sizing: border-box;
border-radius: 6px;
padding: 2px 5px;
margin: auto;
height: 35px;
max-width: 700px;
}
.search-box .fake-tb * {
border: 0 !important;
height: auto !important;
}
.search-box .fake-tb input[type=search] {
border-radius: 6px;
width: 100% !important;
outline: none;
}
.search-box .fake-tb img {
vertical-align: middle;
margin: auto;
padding: 2px;
}
.search-box .dropdown {
display: none;
position: absolute;
border: 1px solid #e5e5e5;
cursor: default;
background: white;
z-index: 99999;
text-align: left;
}
.search-box:focus-within .dropdown {
display: block;
background-color: white;
color: black;
}
.search-box .dropdown>table {
padding: 3px 10px 3px 2px;
width: 100%;
}
.search-box .dropdown table tr:hover {
background-color: lightskyblue;
}
<div>line before ...</div>
<div class="search-box">
<div class="fake-tb">
<input name="ctl32$txtCusSearch" id="ctl32_txtCusSearch" auto-complete="off" type="search">
<img src="search.svg" />
</div>
<div class="dropdown">
<table id="ctl32_lstOptions">
<tbody>
<tr>
<td><input id="ctl32_lstOptions_0" name="ctl32$lstOptions$0" type="checkbox" value="Value1"><label for="ctl32_lstOptions_0">Checkbox 1</label></td>
</tr>
<tr>
<td><input id="ctl32_lstOptions_1" name="ctl32$lstOptions$1" type="checkbox" value="Value2"><label for="ctl32_lstOptions_1">Checkbox 2</label></td>
</tr>
<tr>
<td><input id="ctl32_lstOptions_2" name="ctl32$lstOptions$2" type="checkbox" value="Value3"><label for="ctl32_lstOptions_2">Checkbox 3</label></td>
</tr>
<tr>
<td><input id="ctl32_lstOptions_3" name="ctl32$lstOptions$3" type="checkbox" value="Value4"><label for="ctl32_lstOptions_3">Checkbox 4</label></td>
</tr>
<tr>
<td><input id="ctl32_lstOptions_4" name="ctl32$lstOptions$4" type="checkbox" value="Value5"><label for="ctl32_lstOptions_4">Checkbox 5</label></td>
</tr>
</tbody>
</table>
</div>
</div>
<div>line after ...</div>
There are 2 problems I'm struggling with:
Clicking on checkbox works fine, but clicking on its label closes the dropdown. How can I keep it open?
How do I make the width of dropdown equal to the textbox area, without specifying a fixed width?
I'll prefer a pure CSS solution if possible.

:focus-within activates when an element within your div is focused. However, most elements, including label, cannot be focused on. input can be, which is why your dropdown doesn't disappear on checking a checkbox.
To fix this simply add the tabindex="0" attribute to your label elements.

Related

On Ajax call, reopen a form with preloaded data for editing

I am new to Ajax call and i trying to see if there is a way to reopen a popup form with data i pre entered once i exit out of the form.
I have a button and onclick of that button I am running my AJAX call to get the part name from the database.
The following is my AJAX call:
jQuery(document).ready(function() {
jQuery(".trigger_popup").click(function() {
jQuery('.popup_win').show();
});
jQuery('.popupCloseButton').click(function() {
jQuery('.popup_win').hide();
});
});
function getForm() {
var form = document.getElementById("myForm");
var myAjax = new Ajax.Updater("partnameoutput", "/jsp/PartNameOutput.jsp", {
asynchronous: true,
postBody: Form.serialize(form),
method: 'post',
onComplete: function() {
displayPartName();
}
});
}
function displayPartName() {
var form = document.getElementById("myForm");
var partnameoutput = document.getElementById("partnameoutput").innerHTML;
document.getElementById("partname").innerHTML = partnameoutput;
}
.popup_win {
cursor: pointer;
display: none;
height: 100%;
position: absolute;
left: 20px;
top: 150px;
text-align: center;
top: 0;
width: 100%;
z-index: 10000;
}
.popup_win .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.popup_win>div {
background-color: #fff;
box-shadow: 10px 10px 60px #555;
display: inline-block;
max-width: 750px;
height: auto;
min-height: 100px;
vertical-align: middle;
width: 60%;
position: relative;
border-radius: 8px;
padding: 25px 5%;
}
.popupCloseButton {
background-color: #fff;
border: 3px solid #999;
border-radius: 50px;
cursor: pointer;
display: inline-block;
font-family: arial;
font-weight: bold;
position: absolute;
top: -20px;
right: -20px;
font-size: 25px;
line-height: 30px;
width: 30px;
height: 30px;
text-align: center;
}
.popupCloseButton:hover {
background-color: #ccc;
}
.trigger_popup {
cursor: pointer;
font-size: 12px;
display: inline-block;
font-weight: bold;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 10px;
border: 1px solid #000;
-moz-border-radius: 10px;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 10px;
border: 1px solid #000;
-moz-border-radius: 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
border-spacing: 4px;
}
.TableBox {
display: table;
border-spacing: 6px;
}
.TableBox input[type=text] {}
.TableBox>div {
display: table-row;
border-spacing: 5px
}
.TableBox>div>div {
display: table-cell;
margin: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<td class="trigger_popup"><input type="button" value="Pop Up" onclick="getForm()"> </td>
<div class="popup_win" id="popup_win">
<span class="helper"></span>
<div>
<div class="popupCloseButton">X</div>
<div id="TableBox" class="TableBox" style="width: 110%;">
<div>
<div><span class="partname" id="partname"></span></div>
</div>
</div>
</div>
</div>
<div id="partnameoutput" style="display: none"></div>
Here is my PartName.jsp file i am using to create the rest of my form. Right now when i click my PopUp button it populates the data from the database and generates the rest of my form. However, when i exit out of the form and re-click the button it erases everything.
Is there a way to save the data in the form without actually entering it the database. I just need to save see my data inside the popup when i re-click it and submit the rest of the form.
<%
String partname = request.getParameter("partname");
if (partname != "") {
String partname = request.getParameter("PartName");
List<User> user = User.getPartName(user);
if (user.size() > 0) {
%>
<thead>
<tr><td colspan="5"><br><br><br><br></td></tr>
<tr>
<th align="left">
<th align="left">Part Name</th>
<th align="left">Year</th>
<th align="left">Used</th>
<th align="left">Remaining</th>
</th>
</tr>
</thead>
<%
int sum = 0;
for (int i = 0; i < user.size(); i++) {
User user = (User) user.get(i);
%>
<tr>
<td align="left">
<td><input type="text" value="<%=user.getPartName()%>"></td>
<td><input type="text" class="year" size="10"></td>
<td><input type="text" class="used" id = "used" name= "used" value="" size="10"></td>
<td><input type="text" class="remaining" name="remaining" id="remaining" size="10"></td>
</td>
</tr>
Any help is appreciated. Thank you.

How to overlap the table(td) text without using position property

Here, I'm having issues with the table in display inline-block property. In my scenario, I need to add 2 spans and text inside the td element. When I use it the text wrapped into the next line. Here I need the text overlap into the span, i.e., the spans should not be disturbing the td's text content. I don't want to use position property. Here is my simple demo.
table {
border-collapse: collapse;
width: 200px;
}
table tr td {
border: 1px solid;
}
span.leftspan {
display: inline-block;
width: 50%;
height: 20px;
background-color: skyblue;
}
span.rightspan {
display: inline-block;
width: 40%;
height: 20px;
background-color: red;
}
<table>
<tr>
<td><span class="leftspan"></span><span class="rightspan"></span>12</td>
<td><span class="leftspan"></span><span class="rightspan"></span>25</td>
</tr>
</table>
In the demo 2 numbers (12, 25) shouldn't wrap into the next line. I need to achieve this without position property.
Using display:flex on the td element and flex-grow: 1 in the element containing the number will make this element to fill the rest of the space on the parent td element. then you can make them overlap using a translateX transform. Check this answer for extra info about how flex and flex-grow.
table {
border-collapse: collapse;
width: 200px;
}
table tr td {
border: 1px solid;
display: flex;
}
span.leftspan {
display: inline-block;
width: 50%;
height: 20px;
background-color: skyblue;
}
span.rightspan {
display: inline-block;
width: 40%;
height: 20px;
background-color: red;
}
span.rest {
flex-grow: 1;
transform: translateX(-100%)
}
<table>
<tr>
<td><span class="leftspan"></span><span class="rightspan"></span><span class="rest">12</span></td>
<td><span class="leftspan"></span><span class="rightspan"></span><span class="rest">25</span></td>
</tr>
</table>
Added Div, and added style for Div
table {
border-collapse: collapse;
width: 200px;
}
table tr td {
border: 1px solid;
}
table tr td div {
display: flex;
}
span.leftspan {
display: inline-block;
width: 50%;
height: 20px;
background-color: skyblue;
}
span.rightspan {
display: inline-block;
width: 40%;
height: 20px;
background-color: red;
}
<table>
<tr>
<td>
<div>
<span class="leftspan"></span><span class="rightspan"></span>12
</div>
</td>
<td>
<div>
<span class="leftspan"></span><span class="rightspan"></span>25
</div>
</td>
</tr>
</table>

Bootstrap responsive table with fixed headers on all device sizes?

I currently have this Bootstrap table and the problem I'm facing is that the sticky headers aren't working without removing the Bootstrap .table-responsive class. Is this possible without using JS?
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-fixed {
width: 100%;
}
/* This will work on every browser but Chrome Browser */
.table-fixed thead {
position: sticky;
position: -webkit-sticky;
top: 0;
z-index: 999;
background-color: #FFF;
}
/*This will work on every browser*/
.table-fixed thead th {
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: #FFF;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-fixed">
<thead>
<tr>
<th>Test</th>
<th>Test</th>
</tr>
</thead>
</table>
</div>
position sticky doesn't work with some table elements (thead/tr) in Chrome. You have added sticky position in thead and th both. try below steps.
remove stick position from thead and keep only in th
Add overflow-x: visible for table-responsive class.
Thanks
See the below code to make table header sticky
<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border
</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
</tr>
</tbody>
</table>
</div>
</section>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top: 100px;
left: 100px;
width: 800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 160px;
}
table {
border-spacing: 0;
width: 100%;
}
td+td {
border-left: 1px solid #eee;
}
td,
th {
border-bottom: 1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div {
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div {
border: none;
}
</style>

How can I set width to td?

How can I keep cell phone words in the same line?
.label {
width: 300px;
padding: 5px 15px;
}
.input {
border: 1px solid red;
width: 100%;
}
.input > input {
width: calc(100% - 4px);
}
<form class="frm-find-people">
<table>
<tbody>
<tr>
<td class="label">Cell Phone</td>
<td class="input"><input type="text" name="name"></td>
</tr>
</tbody>
</table>
</form>
As you see, I've set width: 300px for that column. But seems it doesn't apply. Why?
Add white-space: nowrap; to .label:
.label {
padding: 5px 15px;
white-space: nowrap;
}
.input {
border: 1px solid red;
width: 100%;
}
.input > input {
width: calc(100% - 4px);
}
<form class="frm-find-people">
<table>
<tbody>
<tr>
<td class="label">Cell Phone</td>
<td class="input"><input type="text" name="name"></td>
</tr>
</tbody>
</table>
</form>
the 300px width is not being applied because you have a width:100% on the next column, which tells it to occupy as much space as it can.
To fix that, you have to remove the width:100% on the next td. Transfer that to the text field instead. Finally, set the entire table to have width:100% so it covers the entire parent. Below is the corrected CSS.
table {
width: 100%; /* This should be 100% */
}
.label {
width: 300px;
padding: 5px 15px;
}
.input {
border: 1px solid red;
/* remove width 100% from here */
}
.input > input {
width: 100%; /* this should be 100% */
}
Use following css:
table { width:100%; } .label { width: 30%; padding: 5px 15px; } .input { border: 1px solid red; width:70%; } .input > input { width: calc(100% - 4px); }
The problem with your code, is that you should have:
table.mytable {
width: 100%;
}
Because the <td> is a child element of the <table class="mytable">. So the parent element has to have a set size to be able to modify child elements such as <td>. The added mytable class is so that it only affects that table incase you have others.
You've set .input to width: 100%, which is shrinking .label down to the smallest size possible (the length of the words inside)
You could use css calc to make .input 100vw - 300px wide
.input {
width: calc(100vw - 300px);
}
And
.input > input {
width: calc(100vw - 300px);
}
.label {
padding: 5px 15px;
border: 1px solid red;
width: 300px;
}
.input {
border: 1px solid red;
width: calc(100vw - 300px);
}
.input > input {
width: calc(100vw - 300px);
}
tr {
border: 1px solid blue;
}
<form class="frm-find-people">
<table>
<tbody>
<tr>
<td class="label">Cell Phone</td>
<td class="input"><input type="text" name="name"></td>
</tr>
</tbody>
</table>
</form>

How can I make jscolor colorpicker to work on a div?

I am using jscolor colorpicker which can only be attached to button element or input element.I want to use it for div.I tried this way-
https://jsfiddle.net/anuranpal/Lead7c7q/43/
CSS
edit-color-container {
border: 1px solid gainsboro;
height: 70px;
width: 70px;
text-align: center;
}
.select-button {
background: none!important;
border: none;
padding: 0!important;
cursor: pointer;
display: block;
width: 100%;
height: 100%;
-moz-user-select: none;
-webkit-user-select: none;
/* this will work for QtWebKit in future */
-webkit-user-drag: none;
}
.selected-color-container {
-moz-border-radius: 50px/50px;
-webkit-border-radius: 50px 50px;
border-radius: 50px/50px;
width: 35px;
height: 35px;
background: #DF068C;
display: inline-block;
vertical-align: top;
margin: auto;
margin-top: 5px;
position: relative;
}
HTML
<div class="edit-color-container">
<input id="selected-color-value" type="hidden" value="#DF068C" />
<button id="editColor" class="select-button jscolor " data-jscolor="
{width:150, height:150,valueElement:'selected-color-
value',styleElement:'selectedColor',borderWidth:0,borderColor:'#FFF',
insetWidth:0, insetColor:'#FFF',shadow:false,
backgroundColor:'#e6e7e9',borderRadius:2, zIndex:'2000'}">
<div class="selected-color-container" id="selectedColor"></div>
<div class="uk-text-small uk-text-primary uk-margin-small-top" style="margin:auto">Edit</div>
</button>
</div>
But here I have used button instead of div and it is creating some issues in chrome like if I click on the circle,nothing happen but If I click just outside the circle, the color picker toggles.
So, I want to use div instead of button and open the colorpicker when I click on the div.
Please help. Thank you in Advance :-)
Seems like the plugin doesn't support div, but using its api you can toggle colorpicker using code, if I got you correctly, here is my solution:
HTML
<div class="edit-color-container">
<div id="styleSpan" style="background-image: none; background-color: rgb(186, 243, 255); color: rgb(0, 0, 0);"
onclick="document.getElementById('color-picker').jscolor.show()"></div>
<div id="btn" onclick="document.getElementById('color-picker').jscolor.show()">Edit</div>
<input id="color-picker" class="jscolor {styleElement:'styleSpan',value:'DF068C'}" type="hidden">
</div>
CSS
.edit-color-container {
border: 1px solid gainsboro;
height: 70px;
width: 70px;
text-align: center;
}
#styleSpan {
width: 35px;
height: 35px;
border-radius: 50%;
margin: 5px auto;
cursor: pointer;
}
#btn {
cursor: pointer;
}
body > div:last-child {
margin: 50px 0 0 20px;
}
jsfiddle
Notice that you can use onclick on edit-color-container instead.

Categories

Resources