So, here is my sample code:
JSFIDDLE
I would like to popup my hidden long description text correctly.
I can unhide it, but why is the short description cell of my table is so un-fit?(like as border and width of my cell)
I would like to line break my long popup description to 100px...
.table {
border-collapse: collapse;
border-spacing: 0;
width: 120%;
table-layout: fixed;
}
td {
font-family: Arial, sans-serif;
font-size: 14px;
padding: 10px 5px;
overflow: hidden;
word-break: normal;
}
.main-header {
border-style: solid;
border-width: 2px;
text-align: center;
font-size: 18px;
font-weight: bold;
}
.header {
border-style: solid;
border-width: 2px;
text-align: center;
font-weight: bold;
}
.name {
border-style: solid;
border-width: 1px;
text-align: center;
}
.description {
border-style: solid;
border-width: 1px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: inline-block;
position: relative;
width: 100%;
}
.description:hover {
z-index: 1;
width: auto;
background-color: #000000;
color: #ffffff;
}
.qt {
border-style: solid;
border-width: 1px;
text-align: right;
}
.price {
border-style: solid;
border-width: 1px;
text-align: right;
}
<table class="table">
<tr>
<th class="main-header" colspan="4">Test Main Header</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td class="header">Name</td>
<td class="header">Description</td>
<td class="header">qt</td>
<td class="header">Price</td>
</tr>
<tr>
<td class="name">Test product name</td>
<td class="description">Test long description lféjksdéflé lksajdf sadlkjlék sadflkjasd lfljkjlkjléas dflk</td>
<td class="qt">22 pcs</td>
<td class="price">$370</td>
</tr>
</table>
Related
This question already has answers here:
How to add one event listener for all buttons
(4 answers)
Closed 1 year ago.
It's working but only in one button here's my code. When i click at first button it showed up but when i click on the other buttons it doesnt show up. it seems that only at the first buttons its working. I also used the class to call the modal but it seems it also doesnt work.
<!DOCTYPE HTML>
<html>
<head>
<title>Video Records</title>
<style type="text/css">
*{
margin:0;
padding: 0;
box-sizing: border-box;
}
body{
background-image: url(wallpaper.jpg) ;
background-repeat: no-repeat;
background-size: cover;
font-family: sans-serif;
}
.table-container{
padding: 0 10%;
margin: 40px auto 0;
}
.heading{
font-size: 40px;
text-align: center;
color:#FFFFFF;
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
margin-bottom: 40px;
}
.table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
box-shadow: 0 0 0 2px #FFD700;
border-radius: 6px;
}
.table thead{
background-color: #FFD700;
}
.table thead tr th{
font-size: 14px;
font-weight: medium;
letter-spacing: 0.35px;
color: #000000;
opacity: 1;
padding: 12px;
vertical-align: top;
border: 1px solid #000000;
}
.table tbody tr td{
font-size: 14px;
letter-spacing: 0.35px;
font-weight: normal;
color: #000000;
background-color: white;
padding: 8px;
text-align: center;
border: 1px solid #000000;
}
table tr:first-child th:first-child,
table.table tr:first-child {
border-top-left-radius: 6px;
}
table tr:first-child th:last-child,
table.table tr:first-child {
border-top-right-radius: 6px;
}
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}
.table tbody tr td .btn{
width: 130px;
text-decoration: none;
line-height: 35px;
background-color:#ee2828;
display: inline-block;
font-weight: medium;
color: #FFFFFF;
text-align: center;
vertical-align: middle;
user-select: none;
border: 1px solid transparent;
font-size: 14px;
opacity: 1;
border-radius: 5px;
}
.table tbody tr td .btn:hover{
font-weight: bold;
}
.video-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999999;
background-color: rgba(1, 1, 1, 0.7);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
pointer-events: none;
transition: all 0.3s;
}
.video-container .close{
position: absolute;
top:10%;
right: 25px;
font-size: 20px;
cursor: pointer;
color:white;
}
.video-container video{
width: 90%;
max-width: 800px;
transform: scale(0);
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
outline: none;
transition: all 0.3s;
}
.video-container.show{
pointer-events: all;
opacity: 1;
}
.video-container.show video{
transform: scale(1);
}
#media(max-width: 768px){
.table thead{
display: none;
}
.table, .table tbody, .table tr, .table td{
display: block;
width: 100%;
box-shadow: none;
}
.table tr{
margin-bottom: 15px;
}
.table tbody tr td{
text-align: right;
padding-left: 50%;
position: relative;
}
.table td:before{
content: attr(data-label);
position: absolute;
left: 0;
width: 50%;
padding-left: 15px;
font-weight: 600;
font-size: 14px;
text-align: left;
}
}
</style>
</head>
<body>
<div class="video-container" id="videoContainer">
<span class="close" id="close">✖</span>
<video src="video.mp4" controls autoplay></video>
</div>
<div class="table-container">
<h1 class="heading">Video Records</h1>
<table class="table">
<thead>
<tr>
<th>Video ID</th>
<th>File Name</th>
<th>Date</th>
<th>Time</th>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Video ID">0022332</td>
<td data-label="File Name">Videocapture.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0022311</td>
<td data-label="File Name">Videocapture1.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0022131</td>
<td data-label="File Name">Videocapture2.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
<tr>
<td data-label="Video ID">0025321</td>
<td data-label="File Name">Videocapture3.mp4</td>
<td data-label="Date">12 / 04 / 2021</td>
<td data-label="Time">11:34 PM</td>
<td data-label="#">Play</td>
</tr>
</tbody>
</div>
<script type="text/javascript">
btn = document.getElementById("btn");
videoContainer = document.getElementById("videoContainer");
close = document.getElementById("close");
btn.addEventListener('click',()=>{
videoContainer.classList.add('show');
})
close.addEventListener('click',()=>{
videoContainer.classList.remove('show');
})
</script>
</body>
</html>
I think its because of my javascript so I kind of wondering if someone could help me to make it work in multiple buttons instead of one only
With getElementById you'll only get one HTML element. You should use getElementByClassName or querySelectorAll to get all the nodes that match the .class selector. And to attach event listenters to all the nodes in a NodeList object, you can use forEach.
document.querySelectorAll(".btn").forEach(btn => {
btn.addEventListener('click',()=>{
videoContainer.classList.add('show');
})
})
Learn more at https://developer.mozilla.org/en-US/docs/Web/API/Document_object_model/Locating_DOM_elements_using_selectors
I want a textarea inside a cell to be focused when I click in the white area of the cell.
At the same time it is also possible to filter that the function is only applied to cells with the class: "use-keyboard-input".
Thanks!
function textareaFocus(){
$(this).find('textarea').each(function(){
$(this).focus();
});
console.log('test');
}
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable"style="border: none;">
<tbody style="border: none;">
<tr style=" height: 10em;"><td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td><td onclick="textareaFocus();" colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td><td onclick="textareaFocus(); colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td><td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td><td onclick="textareaFocus(); colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
</tr>
</tbody>
</table>
#Ali's answer is correct, you can also do it a bit more abstract way.
$('textarea').on('focus', function() {
console.log('textarea focused');
});
$('textarea').parent('td').on('click', function() {
console.log('cell clicked');
$(this).find('textarea:first-child').focus();
})
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable"style="border: none;">
<tbody style="border: none;">
<tr style=" height: 10em;">
<td style="background-color: var(--dark); width: 15%;" colspan="3">Cell-1:</td>
<td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
<td style="background-color: var(--dark); width: 15%" colspan="2">Cell-2</td>
<td colspan="3"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
<td style="background-color: var(--dark); width: 15%" colspan="3">Cell-3:</td>
<td colspan="4"><textarea oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;" class="use-keyboard-input"></textarea></td>
</tr>
</tbody>
</table>
You need to pass a reference object to the function to determine which cell is clicked. So I updated the function to textareaFocus(obj) and passed td by adding (this) as a parameter to the function:
function textareaFocus(obj){
$(obj).find('textarea').focus();
console.log('test');
}
table{
width: 100% !important;
vertical-align: middle;
border-spacing:0;
border-collapse: collapse;
background-color: white;
}
textarea{
border: none;
width: 100%;
height: 100%;
background-color: transparent;
resize: none;
outline: none;
font-size: 1.8vw;
vertical-align: middle;
text-align: center;
padding: 0;
color: var(--fontDark);
background-color: red;
}
.routeTable td{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
vertical-align: middle;
}
.routeTable th{
border: 1px solid black;
font-size: 1.8vw;
text-align: center;
}
.routeTable tr{
border: 1px solid black;
font-size: 1.8vw;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="routeTable" style="border: none;">
<tbody style="border: none;">
<tr style="height: 10em;">
<td colspan="3" style="background-color: var(--dark); width: 15%;">Cell-1:</td>
<td colspan="3" onclick="textareaFocus(this);">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
<td colspan="2" style="background-color: var(--dark); width: 15%">Cell-2</td>
<td onclick="textareaFocus(this);" colspan="3">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
<td colspan="3" style="background-color: var(--dark); width: 15%">Cell-3:</td>
<td colspan="4" onclick="textareaFocus(this);">
<textarea class="use-keyboard-input" oninput="saveValues();" style="height: 1.5em; text-align: left; padding-top: 0.21em;"></textarea></td>
</tr>
</table>
You can also do that without calling the function through onclick but by binding a listener to td elements:
$(document).ready(function(){
$(".use-keyboard-input").click(function(){
$(this).find("textarea").focus();
})
})
Here is the sample of my page to print, but it break the page in the bad place and the print looks very bad, please check the code to understand what happens? I need to page bread before or after it if needed not in the middle, also some space from bottom.
body {
opacity: 0;
}
#media print {
* {
-webkit-print-color-adjust: exact !important;
}
#font-face {
font-family: "YekanWeb";
src: url("../fonts/YekanWeb-Regular.woff2") format("woff2"),
url("../fonts/YekanWeb-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
#page {
margin-top: 0;
margin-bottom: 0;
padding-top: 1cm;
padding-bottom: 1cm;
}
h2.right-border {
background-color: #f3f5f7;
border-color: #42b983;
padding: 7px 10px;
border-right-width: 0.6rem;
border-right-style: solid;
margin: 1rem -15px;
}
body {
padding-top: 15px;
padding-bottom: 15px;
direction: rtl !important;
text-align: right !important;
font-family: "YekanWeb", arial, sans-serif !important;
}
.table-prices {
break-inside: avoid;
}
body {
opacity: 1 !important;
display: grid !important;
}
table {
page-break-inside: avoid;
}
table {
font-family: "YekanWeb", arial, sans-serif;
border-collapse: collapse;
width: 70%;
}
td,
th {
border: 1px solid #dddddd;
text-align: right;
padding: 2px 8px;
font-weight: 700;
}
.table-invoice tr:nth-child(even) {
background: rgb(241 241 241 / 50%) !important;
}
.reports {
padding: 20px 10px;
font-family: "YekanWeb", "Calibri", "Adobe Arabic";
background: rgb(255, 255, 255);
}
.rep_header {
color: #555;
width: 100%;
height: 100px;
padding-bottom: 10px;
}
.container.rep_header {
border-bottom: 2px solid #333;
}
.header {
position: fixed;
top: 0;
}
.footer {
position: relative;
bottom: 0;
margin-top: 20px;
width: 100%;
text-align: center;
}
.rep_header_logo {
margin: 0px 0px 0px 0px;
display: block;
float: right;
height: 90px;
text-align: right;
}
.rep_header_logo img {
height: 100%;
position: relative;
}
.rep_header_title {
margin: 0px 40px 0px 0px;
float: right;
display: block;
height: 100px;
text-align: right;
}
.rep_header_title h2 {
font-size: 32px;
text-align: right;
line-height: 90px;
vertical-align: middle;
}
.rep_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 150px;
text-align: right;
font-size: 13px;
}
.inv_header_extra {
margin: 20px 0px 0px 0px;
float: left;
display: block;
height: 90px;
width: 140px;
text-align: right;
font-size: 12px;
}
.rep_body {
display: block;
width: 100%;
}
.rep_body_content {
display: block;
width: 100%;
}
.rep_overview {
padding: 0px;
}
.rep_description {
margin: 14px 0px 12px;
}
.paneldiv {
padding: 0px 1%;
}
.table-reports {
margin: 10px 0px 20px;
}
.table-reports tr th,
.table-reports tr td {
padding: 2px 8px;
vertical-align: top;
}
.table-reports thead tr th {
background: rgb(241 241 241 / 50%);
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tfoot tr th {
background: #eee;
font-weight: 700;
font-size: 12px;
line-height: 28px;
direction: rtl !important;
text-align: right !important;
}
.table-reports tr {
font-size: 12px;
}
.table-reports tr:nth-child(even) {
background: #efefef;
}
.rep_wait {
width: 100%;
text-align: center;
margin-top: 130px;
margin-bottom: 130px;
font-size: 40px;
color: #ccc;
}
.rep_no_result {
display: block;
width: 100%;
text-align: center;
margin: 150px 0px;
font-size: 21px;
color: #999;
}
.invoice_heading {
display: block;
width: 98%;
margin: 30px 1%;
font-size: 16px;
}
.in_info {
width: 20%;
text-align: left;
display: block;
float: left;
left: 0px;
}
.or_datetime {
margin: 15px 0px 15px 0px;
font-size: 12px;
color: #777;
font-weight: normal !important;
}
.cu_in_table {
width: 100%;
}
.cu_in_table tr td {
border: 1px solid #999;
font-size: 14px;
padding: 2px 6px;
font-weight: 700;
}
.invtablediv {
display: block;
padding: 0px !important;
}
.table-invoice {
width: 100%;
}
.table-invoice tr th {
padding: 1px 8px;
vertical-align: top;
text-align: center;
border: 1px solid #c2bfbf;
font-size: 12px;
font-weight: 700;
}
.table-invoice tr td {
font-size: 14px;
padding: 3px 8px 2px;
vertical-align: top;
text-align: right;
font-weight: 700;
border: 1px solid #cfcfcf;
}
.table-invoice thead tr th {
background: #ddd;
font-weight: 700;
font-size: 14px;
line-height: 24px;
direction: rtl !important;
text-align: right !important;
}
.table-itemreceipt thead tr th {
line-height: 16px !important;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
background: #e9e9e9;
font-weight: 700;
font-size: 11px;
line-height: 20px;
direction: rtl !important;
text-align: right;
}
.table-invoice tfoot tr th {
padding: 0px 8px;
}
.table-invoice tr {
font-size: 10px;
}
.inv_stamp {
display: block;
padding: 0px 0px;
float: right;
width: 100%;
margin: 15px 0px;
font-size: 12px;
font-weight: 700;
}
.inv_desc {
display: block;
padding: 0px 4px;
margin: 0px 0%;
font-weight: 700;
}
.table-prices {
float: left;
max-width: 50%;
width: min-content;
}
.table-prices th {
white-space: nowrap;
}
.table-prices tr {
background: rgb(241 241 241 / 50%);
}
.inv_verify {
display: block;
padding: 0px 4px;
width: 56%;
width: 100%;
height: 120px;
margin: 10px 0%;
}
.inv_notesdiv {
display: block;
padding: 0px 4px;
float: right;
width: 98%;
margin: 20px 0%;
font-size: 10px;
}
.inv_note {
display: block;
width: 100%;
margin: 8px 0%;
}
.rep_footer {
display: block;
float: right;
width: 80%;
text-align: center;
color: #ccc;
margin-top: 30px;
}
.inv_footer {
background: #fff;
position: fixed;
bottom: 10px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #555;
line-height: 16px;
}
.invz_footer {
border-top: 2px solid #333 !important;
background: #fff;
position: fixed !important;
bottom: 4px !important;
margin-top: 60px;
padding: 8px 1%;
display: block;
float: right;
width: 98%;
font-size: 14px;
color: #777;
line-height: 16px;
}
.invz_footer .company_desc,
.invz_footer .company_contact,
.invz_footer .company_address {
display: block;
float: right;
text-align: right;
font-size: 12px;
}
.invz_footer .company_desc {
width: 40%;
}
.invz_footer .company_contact {
width: 30%;
}
.invz_footer .company_address {
width: 30%;
}
.transaction-block {
display: block;
width: 98%;
margin: 0px 1%;
font-size: 14px;
}
.tr_date table tr td {
padding-left: 4px;
}
.tr_titles {
margin-top: 10px;
}
.tr_titles table tr td {
padding-left: 4px;
}
.tr_desc_table {
width: 100%;
margin-top: 20px;
}
.tr_desc_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd;
border: 1px solid #c2bfbf;
}
.tr_desc_table tbody tr td {
padding: 4px 0;
text-align: center;
border: 1px solid #cfcfcf;
}
.narrations {
margin-top: 20px;
}
.blank_line_label {
display: inline-block;
width: 80px;
}
.blank_line {
display: inline-block;
width: 450px;
border-bottom: 2px solid #aaa;
margin: 0 10px;
}
.verification_area {
width: 100%;
display: block;
margin-top: 20px;
}
.verification_area .tr_titles {
width: 100%;
display: block;
text-align: center;
}
.verification_area .signatures {
display: inline-block;
width: 15%;
margin: 80px 4% 20px;
padding-top: 6px;
border-top: 1px solid #999;
}
.tr_cost_table {
width: 100%;
font-size: 14px;
margin-top: 20px;
}
.tr_cost_table thead tr td {
text-align: center;
line-height: 26px;
font-weight: 700;
background: #ddd i !important;
}
.tr_cost_table tbody tr td {
padding: 4px 0;
text-align: center;
}
.tr_cost_table tfoot tr td {
line-height: 26px;
background: #e4e4e4 !important;
}
.bs_tr_s td {
line-height: 0.3rem !important;
}
.table-prices tr th:first-child {
text-align: left !important;
width: 192px;
}
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<link rel="stylesheet" media="print" href="http://localhost:8000/css/print.css">
<link rel="stylesheet" href="http://localhost:8000/css/print.css" />
</head>
<body onload="window.print()">
<div class="container rep_header">
<header class="rep_header">
<div class="rep_header_logo"><img src="/img/default/logo.png"></div>
<div class="rep_header_title">
<h2>شرکت تجارتی شایق علیمی لمیتد</h2>
</div>
<div class="inv_header_extra"><span>بل آقر</span><br>شمارۀ بل: <span class="invoice_number"
dir="ltr"></span><br>تاریخ صادره: <span class="curdate"></span></div>
</header>
</div>
<div class="container mt-5">
<h2 class="right-border">معلومات آقر</h2>
<div class="row justify-content-between">
<table class="cu_in_table pull-left">
<thead>
<tr>
<td style="width:20%;">سریال نمبر: </td>
<td style="width:80%;">
WB-101
</td>
</tr>
</thead>
<tbody>
<tr>
<td>عنوان:</td>
<td><span class="cu_name">Ducimus do illo id</span>
</td>
</tr>
<tr>
<td>تاریخ نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس نشر اعلان: </td>
<td><span class="" dir="ltr" style="text-align:left;">Aliqua Debitis volu</span></td>
</tr>
<tr>
<td>تاریخ آفرگشایی:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>آدرس آفرگشایی: </td>
<td><span class="" dir="ltr" style="text-align:left;">Blanditiis et odit e</span></td>
</tr>
<tr>
<td>تاریخ ختم پیشنهاد:</td>
<td><span class="" dir="ltr" style="text-align:left;">1400-01-14</span></td>
</tr>
<tr>
<td>شماره شناسایی آقر:</td>
<td><span class="" dir="ltr" style="text-align:left;">Laudantium adipisic</span></td>
</tr>
<tr>
<td>مرجع مربوطه:</td>
<td><span class="" dir="ltr" style="text-align:left;">ریاست محافظت رئیس جمهور</span></td>
</tr>
<tr>
<td>تضمین آفر:</td>
<td><span class="" dir="ltr" style="text-align:left;">23233</span></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="container">
<h2 class="right-border">لیست محصولات</h2>
<div class="row justify-content-between">
<div class="invtablediv">
<table class="table-invoice">
<thead>
<tr>
<th style="width:4%; text-align: center !important;">#</th>
<th style="width:14%; text-align: center !important;">نام محصول</th>
<th style="width:15%; text-align: center !important;">مقدار</th>
<th style="width:10%; text-align: center !important;">فی واحد</th>
<th style="width:15%; text-align: center !important;">مجموع</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Armando Welch</td>
<td>6348</td>
<td>3</td>
<td>19044</td>
</tr>
<tr>
<td>2</td>
<td>2021 سوپر</td>
<td>109980</td>
<td>12</td>
<td>1319760</td>
</tr>
<tr>
<td>3</td>
<td>Cruz Lee</td>
<td>10235</td>
<td>30</td>
<td>307050</td>
</tr>
<tr>
<td>4</td>
<td>Armando Welch</td>
<td>36</td>
<td>2222</td>
<td>79992</td>
</tr>
</tbody>
</table>
<br>
<table class="table-prices text-right float-left">
<thead>
<tr>
<th>قیمت مجموعی اجناس :</th>
<th style="width:142px;">1725846 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">ارزش آقر :</th>
<th>614624 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تامینات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">مالیات :</th>
<th>0 %</th>
</tr>
<tr>
<th style="text-align:left !important;">انتقالات :</th>
<th>0 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">خدمات :</th>
<th>1444 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">تخفیف :</th>
<th>1111222 AFN</th>
</tr>
<tr>
<th style="text-align:left !important;">قیمت نرخ دهی :</th>
<th>1725846 AFN</th>
</tr>
</thead>
</table>
<div class="inv_stamp pull-left margin-top-30" style="width:50%;">
<div class="inv_desc">
ملاحضات:<br>
<div class="inv_desc_detail">
به تعداد (4) قلم جنس برای محترم/محترمه
"ریاست محافظت رئیس جمهور" به ارزش "1725846 افغانی" به
آفر تهیه شده است.
</div>
</div>
<div class="inv_verify margin-top-30">
مهر و امضاء:<br>
<div class="inv_desc_detail">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<div class="container">
<span class="hidespan seller" style="float: left;padding-left: 2%;">چاپ شده توسط
شرکت شایق علیمی</span>
</div>
</div>
</body>
<script>
</script>
</html>
You need to add margins to your page like this:
#page {
margin: 72px 72px 138.24px 72px;
}
and also add these style to avoid breaking your table
table {
page-break-inside: avoid;
page-break-after: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
}
table tfoot thead {
break-inside: auto;
overflow: hidden;
}
I'm trying to sort html elements in JS so it looks like this,
I have it so when you hover over them, they expand with extra info but only the last one in every row gets that feature and I can't figure out why, (i've been trying for hours) if someone could help me i'd appreciate it.
i'll post it link a jsfiddle and ill post my js code here so it's eaiser to read, and all the css/html/js code with be on the jsfiddle,
https://jsfiddle.net/b7dt0xwj/
var days = ['monday', 'tuesday', 'wednesday', 'thursday', 'friday'] //'saturday', "sunday"];
var show = document.getElementsByTagName("tr");
function sortElements(){
// console.log(show)
for (var i=0; i<4; i++){
var dayHeader = document.getElementById(days[i])
var showInfo = document.getElementsByClassName("info")[1]
// console.log(showInfo)
for(var j=0; j<show.length; j++){
if (show[j].getAttribute("day") === dayHeader.getAttribute("id")){
dayHeader.parentNode.insertBefore(show[j], dayHeader.nextSibling);
console.log(show[j])
console.log(j)
dayHeader.parentNode.insertBefore(showInfo, show[j].nextSibling);
}
}
}
}
I used jQuery's .insertAfter after finding the appropriate day. However, I noticed that you rely on the next element to come directly after. So, I moved that element as well.
function sortElements(){
$(".main table tr[day]").each(function () {
var $this = $(this),
$nextEl = $this.next();
$this.insertAfter($this.parent().find("#" + $this.attr("day")));
$nextEl.insertAfter($this)
});
}
sortElements();
body {
font-family: "Roboto";
padding: 0px;
margin: 0px;
background-color: #dddcdc;
}
p {
display: inline;
}
.logo {
display: inline-block;
width: 120px;
margin-top: 10px;
margin-right: 0px;
margin-left: 75px;
font-weight: bold;
color: #ff0808;
font-size: 28px;
}
.logo a {
text-decoration: none;
color: red;
}
.logo a:hover {
color: #e20505;
}
.navbar {
background-color: #e7e6e6;
box-shadow: 1px 1px 7px #5c5c5c;
/* x, distance */
margin: 0px;
height: 52px;
}
.navbar-links {
display: inline;
}
.navbar-links p a {
margin: 0px 0px 0px 65px;
padding: 0px;
display: inline;
font-weight: bold;
text-transform: uppercase;
color: #5c5c5c;
font-size: 18px;
text-decoration: none;
}
p a:hover {
padding-bottom: 6px;
border-bottom: 2px solid #f87531;
}
div p .orange-btn {
position: relative;
bottom: 5px;
left: 230px;
border: 1px solid #f87531;
border-radius: 5px;
color: white;
margin-bottom: 5px;
font-size: 13px;
padding: 12px;
background-color: #f87531;
}
div p .orange-btn:hover {
background-color: #e06f35;
}
.main {
box-shadow: 0 4px 2px -4px #5c5c5c;
margin: 60px 66px;
background-color: #f2f2f2;
}
table {
width: 100%;
border-collapse: collapse;
border-top: none;
border-left: none;
border-right: none;
}
th,
td {
border-left: none;
border-right: none;
padding: 4px 0px;
width: 33%;
text-align: center;
font-size: 18px;
font-weight: 500;
/*border: 1px solid black;*/
}
th {
font-size: 20px;
padding: 5px;
font-weight: bolder;
}
tbody tr:hover {
background-color: #f87531;
cursor: default;
color: white;
}
.day {
width: 99%;
color: #5c5c5c;
text-align: center;
font-weight: 900;
font-size: 25px;
letter-spacing: 2px;
background-color: #dddcdc;
}
.airing {
background-color: #16c966;
}
.info {
/*display: none;*/
}
tr+tr.info {
color: #5c5c5c;
visibility: collapse;
height: 0px;
/*opacity: 0;*/
transition: height 0.3s linear, opacity 0.3s linear;
}
tr:hover+tr.info {
border: 1px solid #f87531;
height: 100px;
opacity: 1;
visibility: visible;
display: table-row;
}
.info:hover {
color: #5c5c5c;
background-color: #f2f2f2;
height: 100px;
opacity: 1px;
visibility: visible;
display: table-row;
border: 1px solid #f87531;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main">
<table border="1">
<thead>
<tr>
<th>Show name</th>
<th>Season | Episode</th>
<th>Day of Return</th>
</tr>
</thead>
<tbody>
<tr id="monday">
<td class="day"colspan="3">
Monday
</td>
</tr>
<tr id="tuesday">
<td class="day" colspan="3">
Tuesday
</td>
</tr>
<tr id="wednesday">
<td class="day" colspan="3">
Wensday
</td>
</tr>
<tr id="thursday">
<td class="day" colspan="3">
Thursday
</td>
</tr>
<tr id="friday">
<td class="day" colspan="3">
Friday
</td>
</tr>
<tr class="airing" day="monday">
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr class="info">
<td colspan="3">show info here</td>
</tr>
<!-- -->
<tr class="airing" day="monday">
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr class="info">
<td colspan="3">show info here</td>
</tr>
<!-- -->
<tr day="tuesday">
<td>arrow</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>
You are not calling the sortElement function. add the following at the bottom of your script.
sortElements();
Can anyone please help me in below issue.
I have a table with some hyper links in once cell. I want to show 3 dots when the text exceeds to cell width. Basically I want to display only one link per line and if there is a long text in hyper link, it should not spill over to next line.
Browser: IE
.foi_overlap_ink {
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
}
.foi_overlap_ink {
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
}
.firstColumn {
text-align: left;
width: 150px;
}
.secondColumn {
text-align: left;
width: 50px;
}
<table>
<tr>
<TD class=firstColumn style="BORDER-TOP: #8f8f8f 1px solid; BORDER-RIGHT: #8f8f8f 1px solid; BORDER-BOTTOM: #8f8f8f 1px solid; BORDER-LEFT: #8f8f8f 1px solid"><B>Overlap Link</B></TD>
<TD class="secondColumn foi_overlap_ink" style="BORDER-TOP: #8f8f8f 1px solid; BORDER-RIGHT: #8f8f8f 1px solid; BORDER-BOTTOM: #8f8f8f 1px solid; BORDER-LEFT: #8f8f8f 1px solid">
<A style="OVERFLOW: hidden; FONT-SIZE: 12px; TEXT-DECORATION: underline; TEXT-OVERFLOW: ellipsis; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2013-03-31','2016-10-05');">2013-03-31-2015 - bonappetit Condensat</A>
<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2013-04-30','2016-03-07');">2013-04-30-DailyExcerise</A>
<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2013-10-31','2016-03-07');">2013-04-30-DailyExcerise</A>
<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2014-03-31','2016-03-07');">2013-04-30-DailyExcerise</A>
<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2014-05-31','2016-03-07');">2013-04-30-DailyExcerise</A>
<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2014-06-30','2016-03-07');">2013-04-30-DailyExcerise</A>
<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2013-03-31','2016-03-07');">2013-04-30-DailyExcerise</A>
</TD>
</tr>
</table>
.secondColumn {
text-align: left;
width: 50px;
display: block;
}
Add display block to the class secondColumn. this makes it a block element and takes the specified width and your ellipsis works.
If possible, wrap the contents of each cell in a div, and style that div instead. It would require some formatting on your table too, however.
Here's a demo:
table {
border: 1px solid;
border-collapse: collapse;
table-layout: fixed;
}
td,
th {
border: 1px solid;
max-width: 65px;
}
div {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
}
<table>
<tr>
<th>title 1</th>
<th>title 2</th>
<th>title 3</th>
</tr>
<tr>
<td>
<div>text</div>
</td>
<td>
<div>text text</div>
</td>
<td>
<div>text text text</div>
</td>
</tr>
</table>
text-overflow only applies to block containers: https://drafts.csswg.org/css-ui-3/#text-overflow
a is not a block container: https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2
Simply make it a block with display: block;
Note that you'll also have to keep the table column narrow enough to have the ellipsis (max-width: 50px; instead of width:50px;)
I would write:
.secondColumn {
text-align: left;
/* width: 50px;*/
width: 150px;/* according to your given example*/
max-width: 150px;
}