HTML Horizontal Scroll not showing up - javascript

I am having trouble getting the horizontal scroll bar to show up. I can still scroll horizontally with the track pad and everything is formatted correctly but the bar itself is not showing up so that you can use it to move horizontally on the table with the mouse. Any help figuring this out would be greatly appreciated, thank you!
HTML - Through React Framework
{/* Order */}
<div className ="order">
<table>
<tbody>
<tr>
<td>Id</td>
<td>Farm</td>
<td>Field</td>
<td>W/O</td>
<td>Job</td>
<td>APA</td>
<td>Acres</td>
<td>Status</td>
<td>Solution</td>
<td>Date Ordered</td>
<td>Date Sampled</td>
<td>Date Billed</td>
<td>Price</td>
<td>Years Billed</td>
<td>Split 1</td>
<td>Split 2</td>
</tr>
{orders.map((order, num) => {
let splitOne = ""
let splitTwo = ""
if(order.split_one_name.length > 1){
splitOne = `${order.split_one_name} - ${order.split_one_share}`
}
if(order.split_two_name.length > 1){
splitTwo = `${order.split_two_name} - ${order.split_two_share}`
}
return (
<tr key={order.id}>
<td>{order.id}</td>
<td>{order.farm}</td>
<td>{order.field}</td>
<td>{startInputMode(order.wo_num, num, 'wo_num')}</td>
<td>{startInputMode(order.job_num, num, 'job_num')}</td>
<td>{order.firstname + " " + order.lastname}</td>
<td>{order.acres}</td>
<td>{startInputMode(order.status, num, 'status')}</td>
<td>{order.solution}</td>
<td>{order.date_ordered.slice(0,10)}</td>
<td>{startInputMode(order.date_sampled, num, 'date_sampled')}</td>
<td>{startInputMode(order.date_billed, num, "date_billed")}</td>
<td>{order.price}</td>
<td>{order.years_billed}</td>
<td>{splitOne}</td>
<td>{splitTwo}</td>
</tr>)
})}
</tbody>
</table>
</div>
CSS
table {
font-family: arial, sans-serif;
border-collapse: collapse;
align-self: center;
justify-self: center;
width: 100%;
overflow: scroll;
white-space: nowrap;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
min-width: 100px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
.order {
display: block;
grid-area: orders;
height: 100%;
width: 100%;
align-self: center;
justify-self: center;
max-height: 520px;
overflow: scroll;
justify-content: center;
align-content: center;
}
::-webkit-scrollbar {
width: 5px;
height: 0px;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: grey;
border-radius: 10px;
}

In your table css, change overflow: scroll to overflow: auto.
Then remove height: 0px from ::-webkit-scrollbar.
::-webkit-scrollbar Docs

Related

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!

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>

Resize by fixed value using CSS

I'm using CSS resize:both; property to let users resize my content. See the code below.
.foo {
resize: both;
min-width: 250px;
width: auto;
text-align: center;
min-height: 30px;
border: 1px solid #515151;
border-radius: 6px;
position: absolute;
padding: 0;
overflow: hidden;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
box-shadow: 5px 5px rgba(0,0,0, 0.1);
}
.thClass {
margin-left: -3px;
text-align: center;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
margin-top: -2px;
min-height: 30px;
line-height: 30px;
font-size: 19px;
cursor: move;
}
.header{
margin-left: 17px;
}
.tableBody {
display: block;
min-height: 25px;
text-align: center;
width: 102%;
margin-left: -2px;
cursor: default;
}
.foo tbody tr td {
display: block;
line-height: 25px;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
#displaySizes {
list-style: none;
padding: 0;
margin-top: 0;
}
.disp tbody tr th {
border: 1px solid black;
}
.disp tbody tr td {
display: table-cell;
}
<table class="foo disp elementTable">
<tr class="tableHeader">
<th class="thClass" colspan="5">
<span class="header">Device</span>
</th>
</tr>
<tr>
<td rowspan="4" id="sizeContainer">
<ul id="displaySizes">
<li>4:3</li>
<li>16:9</li>
<li>Clock</li>
</ul>
</td>
<td>$100</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
</table>
Is there a way to resize this table step by step using CSS, for example, by [10,10] pixels? JavaScript is also OK. I've searched the web, but could not find anything. Here is the working fiddle for you to play with code.
Here's a solution I put together that will snap to given grid on resize (in this example 20px.)
It uses "cross browser resize event listener", that a another developer has put together (source):
Basically it just listens to the resize event, then sets the styles for width and height using javascript.
Fiddle here:
https://jsfiddle.net/treetop1500/co8zbatz/
// utility function for rounding (20px in this case)
function round20(x)
{
return Math.ceil(x/20)*20;
}
// Attach listener
var myElement = document.getElementById('resize'),
myResizeFn = function(){
h = round20(parseInt(this.style.height,10));
w = round20(parseInt(this.style.width,10));
this.style.height = h + "px";
this.style.width = w + "px";
};
addResizeListener(myElement, myResizeFn);
That's a good point , So It's possible using the css-element-queries Library ,
All you have is creating a ResizeSensor() for your table and then make calculation to set both height and width range change :
See below Snippet :
var width = $('.elementTable').width();
var height = $('.elementTable').height();
var changePX = 50;
new ResizeSensor(jQuery('.elementTable'), function(){
//width calcuation
if(Math.abs($('.elementTable').width()-width) > changePX) {
$('.elementTable').width() > width ? width +=changePX : width -=changePX;
}
$('.elementTable').width(width);
//height calcuation
if(Math.abs($('.elementTable').height()-height) > changePX) {
$('.elementTable').height() > height ? height +=changePX : height -=changePX;
}
$('.elementTable').height(height);
})
.foo {
resize: both;
min-width: 250px;
width: auto;
text-align: center;
min-height: 30px;
border: 1px solid #515151;
border-radius: 6px;
position: absolute;
padding: 0;
overflow: hidden;
text-shadow: 1px 1px 1px rgba(0,0,0,0.33);
box-shadow: 5px 5px rgba(0,0,0, 0.1);
}
.thClass {
margin-left: -3px;
text-align: center;
box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
-moz-box-shadow: 0 2px 2px rgba(0,0,0,0.26);
margin-top: -2px;
min-height: 30px;
line-height: 30px;
font-size: 19px;
cursor: move;
}
.header{
margin-left: 17px;
}
.tableBody {
display: block;
min-height: 25px;
text-align: center;
width: 102%;
margin-left: -2px;
cursor: default;
}
.foo tbody tr td {
display: block;
line-height: 25px;
text-align: center;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
#displaySizes {
list-style: none;
padding: 0;
margin-top: 0;
}
.disp tbody tr th {
border: 1px solid black;
}
.disp tbody tr td {
display: table-cell;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ResizeSensor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/css-element-queries/0.4.0/ElementQueries.min.js"></script>
<table class="foo disp elementTable">
<tr class="tableHeader">
<th class="thClass" colspan="5">
<span class="header">Device</span>
</th>
</tr>
<tr>
<td rowspan="4" id="sizeContainer">
<ul id="displaySizes">
<li>4:3</li>
<li>16:9</li>
<li>Clock</li>
</ul>
</td>
<td>$100</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
<tr>
<td>February</td>
<td>February</td>
<td>February</td>
<td>February</td>
</tr>
</table>

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>

Categories

Resources