Close other div when new is clicked

Close other div when new is clicked - javascript

So I have this table with a menu dropdown, but I'm having trouble getting the divs close when I click on one of the other menu dropdown divs. This is because the JS looks for a click inside/outside of the class, but how can I change this?
I'm trying to avoid the user from opening multiple dropdown menus at the same time, like this:
Here is the working code to see the problem.
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function wdc_jql_menu(menu_id) {
document.getElementById(menu_id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.wdc_jql_table{
/* table width */
border:1;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
background-color: #2F2F35;
table-layout:fixed; // Cells is fixed to the percentage the cells is assigned too
word-wrap:break-word;
color: white;
}
.wdc_jql_table thead, tr{
/* table style - bottom borders to seperate rows */
border-bottom: 1.5px solid #3A3B41;
}
.wdc_jql_table tr:last-child{
/* table style - no border at last row */
border-bottom: none;
}
.wdc_jql_table
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
th:nth-child(4){
/* table child th align (project name, owner, jql) */
text-align: left;
font-size: 24px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(1),
td:nth-child(2),
td:nth-child(3){
/* table child td align (project name, owner, jql) */
text-align: left;
font-size: 16px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(4){
/* table child td align (...) */
text-align: center;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 15px;
padding-left: 10px;
}
.wdc_jql_col1{
/* table col(project name) width */
width: 20%;
}
.wdc_jql_col2{
/* table col(owner) width */
width: 20%;
}
.wdc_jql_col3{
/* table col(jql) width */
width: 50%;
}
.wdc_jql_col4{
/* table col(...) width */
width: 10%;
}
/* MENU DESIGN */
.dropbtn {
background-color: #2F2F35;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #8D90A1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<table id="others_jql" class="wdc_jql_table padding_jql_bottom">
<col class="wdc_jql_col1">
<col class="wdc_jql_col2">
<col class="wdc_jql_col3">
<col class="wdc_jql_col4">
<thead>
<tr>
<th>Project Name</th>
<th>Owner</th>
<th>JQL</th>
<th></th>
</tr>
</thead>
<tbody id="table_body_others">
<tr id="tr1">
<td name="projectNameTable">td1</td>
<td name="employeeNo">td2</td>
<td name="jqlTable">td3</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_1')" class="dropbtn">⋮</button>
<div id="menu_1" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="tr2">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_2')" class="dropbtn">⋮</button>
<div id="menu_2" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="tr3">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_3')" class="dropbtn">⋮</button>
<div id="menu_3" class="dropdown-content">
Edit
Remove
</div>
</tr>
</tbody>
</table>
So the solution is to rewrite the JS to listen for the div ID and then close the other open/shown classes I guess, but how?

Thanks to the comment
Either find the element that currently has the class show and then remove that class, before you set it for the current one; or remember what element you added the class to the previous time, and then remove it from that. – CBroe
the solution was created here:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function wdc_jql_menu(menu_id) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
document.getElementById(menu_id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.wdc_jql_table{
/* table width */
border:1;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
background-color: #2F2F35;
table-layout:fixed; // Cells is fixed to the percentage the cells is assigned too
word-wrap:break-word;
color: white;
}
.wdc_jql_table thead, tr{
/* table style - bottom borders to seperate rows */
border-bottom: 1.5px solid #3A3B41;
}
.wdc_jql_table tr:last-child{
/* table style - no border at last row */
border-bottom: none;
}
.wdc_jql_table
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
th:nth-child(4){
/* table child th align (project name, owner, jql) */
text-align: left;
font-size: 24px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(1),
td:nth-child(2),
td:nth-child(3){
/* table child td align (project name, owner, jql) */
text-align: left;
font-size: 16px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(4){
/* table child td align (...) */
text-align: center;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 15px;
padding-left: 10px;
}
.wdc_jql_col1{
/* table col(project name) width */
width: 20%;
}
.wdc_jql_col2{
/* table col(owner) width */
width: 20%;
}
.wdc_jql_col3{
/* table col(jql) width */
width: 50%;
}
.wdc_jql_col4{
/* table col(...) width */
width: 10%;
}
/* MENU DESIGN */
.dropbtn {
background-color: #2F2F35;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #8D90A1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<table id="others_jql" class="wdc_jql_table padding_jql_bottom">
<col class="wdc_jql_col1">
<col class="wdc_jql_col2">
<col class="wdc_jql_col3">
<col class="wdc_jql_col4">
<thead>
<tr>
<th>Project Name</th>
<th>Owner</th>
<th>JQL</th>
<th></th>
</tr>
</thead>
<tbody id="table_body_others">
<tr id="tr1">
<td name="projectNameTable">td1</td>
<td name="employeeNo">td2</td>
<td name="jqlTable">td3</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_1')" class="dropbtn">⋮</button>
<div id="menu_1" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="tr2">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_2')" class="dropbtn">⋮</button>
<div id="menu_2" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="tr3">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="wdc_jql_menu('menu_3')" class="dropbtn">⋮</button>
<div id="menu_3" class="dropdown-content">
Edit
Remove
</div>
</tr>
</tbody>
</table>

Hello just tried below code and worked,
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function wdc_jql_menu(menu_id) {
clearDropdown();
document.getElementById(menu_id).classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
clearDropdown();
}
}
function clearDropdown() {
const boxes = document.querySelectorAll('.dropdown-content');
boxes.forEach(box => {
box.classList.remove('show');
});
}

Related

Clickable td field and showing menu options

So I've created a table, and want the dots to be clickable and then show a menu with two clickable options. But I'm trying to figure out how this could be done?
To make the text inside the <td> clickable I could do something like ... I think, but how can I make the clickable menu show under it?
I've posted the code here:
.wdc_jql_table{
/* table width */
border:1;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
background-color: #2F2F35;
table-layout:fixed; // Cells is fixed to the percentage the cells is assigned too
word-wrap:break-word;
color: white;
}
.wdc_jql_table thead, tr{
/* table style - bottom borders to seperate rows */
border-bottom: 1.5px solid #3A3B41;
}
.wdc_jql_table tr:last-child{
/* table style - no border at last row */
border-bottom: none;
}
.wdc_jql_table
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
th:nth-child(4){
/* table child th align (project name, owner, jql) */
text-align: left;
font-size: 24px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(1),
td:nth-child(2),
td:nth-child(3){
/* table child td align (project name, owner, jql) */
text-align: left;
font-size: 16px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(4){
/* table child td align (...) */
text-align: center;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 15px;
padding-left: 10px;
}
.wdc_jql_col1{
/* table col(project name) width */
width: 20%;
}
.wdc_jql_col2{
/* table col(owner) width */
width: 20%;
}
.wdc_jql_col3{
/* table col(jql) width */
width: 50%;
}
.wdc_jql_col4{
/* table col(...) width */
width: 10%;
}
<table id="others_jql" class="wdc_jql_table padding_jql_bottom">
<col class="wdc_jql_col1">
<col class="wdc_jql_col2">
<col class="wdc_jql_col3">
<col class="wdc_jql_col4">
<thead>
<tr>
<th>Project Name</th>
<th>Owner</th>
<th>JQL</th>
<th></th>
</tr>
</thead>
<tbody id="table_body_others">
<tr id="<?php echo $wdc_jql_other[$i]['wdc_jql_id']; ?>">
<td name="projectNameTable">td1</td>
<td name="employeeNo">td2</td>
<td name="jqlTable">td3</td>
<td name="edit_other">⋮</td>
</tr>
<tr id="<?php echo $wdc_jql_other[$i]['wdc_jql_id']; ?>">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_other">⋮</td>
</tr>
</tbody>
</table>
I'm trying to create something like this:
EDIT: I now have a menu, but it doesn't align with row
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
.wdc_jql_table{
/* table width */
border:1;
width: 100%;
border-spacing: 0;
border-collapse: collapse;
background-color: #2F2F35;
table-layout:fixed; // Cells is fixed to the percentage the cells is assigned too
word-wrap:break-word;
color: white;
}
.wdc_jql_table thead, tr{
/* table style - bottom borders to seperate rows */
border-bottom: 1.5px solid #3A3B41;
}
.wdc_jql_table tr:last-child{
/* table style - no border at last row */
border-bottom: none;
}
.wdc_jql_table
th:nth-child(1),
th:nth-child(2),
th:nth-child(3),
th:nth-child(4){
/* table child th align (project name, owner, jql) */
text-align: left;
font-size: 24px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(1),
td:nth-child(2),
td:nth-child(3){
/* table child td align (project name, owner, jql) */
text-align: left;
font-size: 16px;
padding: 5px;
}
.wdc_jql_table
td:nth-child(4){
/* table child td align (...) */
text-align: center;
font-size: 16px;
padding-top: 5px;
padding-bottom: 5px;
padding-right: 15px;
padding-left: 10px;
}
.wdc_jql_col1{
/* table col(project name) width */
width: 20%;
}
.wdc_jql_col2{
/* table col(owner) width */
width: 20%;
}
.wdc_jql_col3{
/* table col(jql) width */
width: 50%;
}
.wdc_jql_col4{
/* table col(...) width */
width: 10%;
}
/* MENU DESIGN */
.dropbtn {
background-color: #2F2F35;
color: white;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #8D90A1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
<table id="others_jql" class="wdc_jql_table padding_jql_bottom">
<col class="wdc_jql_col1">
<col class="wdc_jql_col2">
<col class="wdc_jql_col3">
<col class="wdc_jql_col4">
<thead>
<tr>
<th>Project Name</th>
<th>Owner</th>
<th>JQL</th>
<th></th>
</tr>
</thead>
<tbody id="table_body_others">
<tr id="<?php echo $wdc_jql_other[$i]['wdc_jql_id']; ?>">
<td name="projectNameTable">td1</td>
<td name="employeeNo">td2</td>
<td name="jqlTable">td3</td>
<td name="edit_personal"><button onclick="myFunction()" class="dropbtn">⋮</button>
<div id="myDropdown" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="<?php echo $wdc_jql_other[$i]['wdc_jql_id']; ?>">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="myFunction()" class="dropbtn">⋮</button>
<div id="myDropdown" class="dropdown-content">
Edit
Remove
</div>
</tr>
<tr id="<?php echo $wdc_jql_other[$i]['wdc_jql_id']; ?>">
<td name="projectNameTable">td11</td>
<td name="employeeNo">td22</td>
<td name="jqlTable">td33</td>
<td name="edit_personal"><button onclick="myFunction()" class="dropbtn">⋮</button>
<div id="myDropdown" class="dropdown-content">
Edit
Remove
</div>
</tr>
</tbody>
</table>

You would need to create something like that:
Add class="edit_other" for each dropdown component. Then:
let dropdowns = document.querySelectorAll(".edit_other");
let container = document.createElement("div");
container.setAttribute("tabindex", "0");
container.classList.add("dropdown__container");
dropdown.appendChild(container);
let optionsContainer = document.createElement("div");
optionsContainer.classList.add("dropdown__options-container");
dropdown.appendChild(optionsContainer);
let optionDivs = [];
let optionDiv = document.createElement("div");
optionDiv.innerHTML = options[i].innerHTML;
optionDiv.classList.add("dropdown__option");
optionsContainer.appendChild(optionDiv);
optionDivs.push(optionDiv);
That are basically containers and option divs for your select component:
<select name="dropdown-menu">
<option>Edit</option>
<option>Remove</option>
</select>
Hope it helps. You can build on top of that.

focus-within css not working for html label

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.

mobile version filter is not showing properly

I made filter based on selection in input. It shows only items with same category on click. On desktop version when I click for example "Others" it will list only tr with Others in category but when I resize on mobile version and press filter, so nothing happen. All tr's are still showing. Really don't have idea what is difference between mobile and desktop version when JS is working with same code in both views.
highlightRows = () => {
let oddRows = document.querySelectorAll('tbody > tr.show')
oddRows.forEach((row, index)=> {
if (index % 2 == 0) {
row.style.background = '#f1f1f1'
} else {
row.style.background = '#fff'
}
})
}
const filterOptions = () => {
const option = document.querySelector("#filter").value;
const selection = option.replace('&', '')
const rows = document.querySelectorAll("#body1 > tr");
console.log(rows.length);
rows.forEach(row => {
let td = row.querySelector("td:last-child");
let filter = td.innerText.replace('&', '');
if (filter === selection) {
row.className = 'show'
} else {
row.className = 'hidden'
}
});
highlightRows()
};
document.getElementById("filter").addEventListener("change", filterOptions);
.table-filters {
display: flex;
align-items: center;
justify-content: center;
margin: 2em;
text-align: center;
}
.table-filters a {
color: #222;
font-size: 16px;
font-weight: 500;
margin-right: 1em;
display: inline-block;
}
.table-filters a:hover {
text-decoration: none;
}
.table-filters select {
background: #fff;
font-size: 16px;
font-weight: 500;
width: 12em;
height: 2.5em;
}
table.stats {
background: #fff;
width: 100%;
table-layout: fixed;
border-radius: 6px;
}
tbody tr.show {
display: table-row;
}
tbody tr.hidden {
display: none;
}
table.vypis {
border: 1px solid #ccc;
border-collapse: collapse;
margin: 0;
padding: 0;
width: 100%;
table-layout: fixed;
}
table.vypis > caption {
font-size: 1.5em;
margin: .5em 0 .75em;
}
table.vypis > tr.vypis-riadok {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: .35em;
}
table.vypis th,
table.vypis td {
padding: .625em;
text-align: center;
}
table.vypis th {
font-size: .85em;
letter-spacing: .1em;
text-transform: uppercase;
}
#media screen and (max-width: 800px) {
table.vypis {
border: 0;
}
table.vypis > caption {
font-size: 1.3em;
}
table.vypis > thead {
border: none;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
table.vypis td {
border-bottom: 1px solid #ddd;
display: block;
font-size: .8em;
text-align: right;
}
table.vypis td::before {
content: attr(data-label);
float: left;
font-weight: bold;
text-transform: uppercase;
}
table.vypis td:last-child {
border-bottom: 0;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="table-filters">
<select id="filter">
<option disabled selected value="none">Categories</option>
<option>Hobby</option>
<option>Others</option>
</select>
</div>
<table class="vypis">
<caption>Pohyby na účte</caption>
<thead>
<tr>
<th scope="col">Refer</th>
<th scope="col">Date</th>
<th scope="col">Price</th>
<th scope="col">Category</th>
</tr>
</thead>
<tbody id="body1">
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Hobby</td>
</tr>
<tr class="vypis-riadok">
<td scope="row" data-label="refer">[[X04_riadok_1_popis_transakcie]] <br> [[X10_riadok_2_popis_transakcie]]</td>
<td data-label="date">[[X02_riadok_1_datum]]</td>
<td data-label="price">[[X08_riadok_1_suma]] €</td>
<td data-label="category">Others</td>
</tr>

Your code works well, but the problem is with rule display: block, which is in the media query. in the table.vypis tr selector. This rule overrides another block hiding rule. You need to remove display: block out of table.vypis tr.
#media screen and (max-width: 800px) {
...
table.vypis tr {
border-bottom: 3px solid #ddd;
display: block;
margin-bottom: .625em;
}
...
}
Or a second solution:
Add! !important to rule display: none, selector tbody tr.hidden. It should look like this:
tbody tr.hidden {
display: none!important;
}
I advise you to use the second solution!

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>

CSS link hover - how to expand area that changes colour upon hovering

I have this JS fiddle https://jsfiddle.net/658epj15/
.navChild:hover{
background-color:#626262;
}
When I hover over a link, the word has a background around it that illuminates, that is the length of the word.
How can I extend this so that it illuminates over the whole <td> and not just the div, so it illuminates from the left border of the <td> to the right border of the <td>?

Use tr td instead of .navChild
tr td:hover {
background-color: #626262;
}
https://jsfiddle.net/658epj15/2/
Update, regarding to your comment:
Pay attention to the following lines
tr td:hover, .current {
background-color: #626262;
}
and
<td class="current"><a class="navChild" href=b illboard.html>Nav 1</a></td>
.navParent table {
color: #ffffff;
table-layout: fixed;
text-align: center;
position: absolute;
font-size: 20px;
border: none;
border-collapse: collapse;
width: 100%;
}
.navParent table td {
border-left: 1px solid #000000;
}
.navParent table td:first-child {
border-left: none;
}
.navParent a {
text-decoration: none;
color: black;
}
.navChild {
width: 100%;
height: auto;
}
tr td:hover,
.current {
background-color: #626262;
}
<div class="navParent">
<nav>
<table>
<tr>
<td class="current"><a class="navChild" href=b illboard.html>Nav 1</a></td>
<td><a class="navChild" href=a bout.html>Nav 2</a></td>
<td><a class="navChild" href=l ocations.html>Nav 3</a></td>
<td><a class="navChild" href=p ricing.html>Nav 4</a></td>
</tr>
</table>
</nav>
</div>

Instead of adding hover on a add hover on td
.navParent table{
color:#ffffff;
table-layout: fixed;
text-align:center;
position:absolute;
font-size: 20px;
border: none;
border-collapse:collapse;
width:100%;
}
.navParent table td{
border-left: 1px solid #000000;
}
.navParent table td:first-child{
border-left:none;
}
.navParent a{
text-decoration: none;
color:black;
}
.navChild
{
width: 100%;
height: auto;
}
.navParent td:hover{
background-color:#626262;
}
<div class = "navParent">
<nav>
<table>
<tr>
<td><a class = "navChild" href = billboard.html>Nav 1</a></td>
<td><a class = "navChild" href = about.html>Nav 2</a></td>
<td><a class = "navChild" href = locations.html>Nav 3</a></td>
<td><a class = "navChild" href = pricing.html>Nav 4</a></td>
</tr>
</table>
</nav>
</div>

You want to display the a as a block element so it takes up the space of the cell that it is in. Also, you want to set the cellpadding on the table to 0 to eliminate the spacing around the text (you said you wanted it go border to border). This updated fiddle also fixes some incorrect HTML in the original (the closing table tag was wrong). https://jsfiddle.net/658epj15/3/
.navParent table {
color: #ffffff;
table-layout: fixed;
text-align: center;
position: absolute;
font-size: 20px;
border: none;
border-collapse: collapse;
width: 100%;
}
.navParent table td {
border-left: 1px solid #000000;
}
.navParent table td:first-child {
border-left: none;
}
.navParent a {
text-decoration: none;
color: black;
}
.navChild {
width: 100%;
height: auto;
display: block;
}
.navChild:hover {
background-color: #626262;
}
<div class="navParent">
<nav>
<table cellpadding="0">
<tr>
<td><a class="navChild" href=billboard.html>Nav 1</a></td>
<td><a class="navChild" href=about.html>Nav 2</a></td>
<td><a class="navChild" href=locations.html>Nav 3</a></td>
<td><a class="navChild" href=pricing.html>Nav 4</a></td>
</tr>
</table>
</nav>
</div>

By default, your <a> tags are set to display: inline, and won't fill out the <td>. Set them to display: block, and the hover should work as expected.
Updated fiddle.

Develop Reference

JavaScript is the programming language of the Web.

Close other div when new is clicked - javascript

Related

Clickable td field and showing menu options

focus-within css not working for html label

mobile version filter is not showing properly

Bootstrap responsive table with fixed headers on all device sizes?

CSS link hover - how to expand area that changes colour upon hovering

Categories

Resources