Мобильная версияКод: Выделить всё
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
body {
font-family: Calibri, monospace;
font-size: 0.8rem;
margin: 1rem;
border: 1px solid;
}
body ol {
list-style: none;
padding-left: 0;
margin: 0.5rem 0;
}
table {
width: 100%;
height: 100%;
border-collapse: collapse;
page-break-inside: auto;
}
td section div {
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
header {
display: flex;
flex-direction: column;
align-items: center;
font-weight: normal;
padding: 0 0.5rem;
position: relative;
}
header h1 {
font-size: 2rem;
font-weight: bold;
margin: 0;
}
header h2 {
font-size: 1.5rem;
font-weight: bold;
margin: 0;
}
header h3 {
font-size: 1rem;
font-weight: normal;
margin: 0;
}
header ul {
list-style: none;
padding-left: 0;
margin: 0.5rem 0;
}
header #brand {
border-bottom: 1px solid;
padding: 0.25rem 0.5rem;
text-transform: uppercase;
width: 100%;
}
header #phone {
position: absolute;
text-align: right;
top: 0;
right: 0.5rem;
}
header #invoicedetails {
display: grid;
grid: "customer-billed customer-shipped invoice";
grid-template-columns: repeat(3, 1fr);
padding: 0 0.5rem;
border-bottom: 1px solid;
width: 100%;
}
header #customer-billed {
text-align: left;
}
header #customer-shipped {
border: 1px solid;
border-top: 0;
border-bottom: 0;
padding-left: 0.5rem;
text-align: left;
}
header #invoice {
text-align: right;
}
table tbody td {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
main {
display: flex;
flex-direction: column;
height: 100%;
}
#invoiceitems {
display: block;
height: 100%;
text-transform: uppercase;
}
#itemscontent {
height: 100%;
display: grid;
/*Below line is added as inline style in A4 invoice component*/
/*grid: "sno description hsn scale scale2 unit price unitprice";*/
/*grid-template-rows: repeat(2, minmax(1rem, max-content)) auto repeat(2, minmax(1rem, max-content));*/
/*grid-template-columns: minmax(min-content, max-content) minmax(min-content, auto) max-content max-content max-content max-content max-content max-content;*/
grid-auto-rows: minmax(1rem, max-content);
grid-column-gap: 1px;
align-items: center;
}
#itemscontent>div {
display: flex;
align-items: center;
border: 1px solid;
height: 100%;
border-top: 0;
border-right: 0;
padding: 0 0.25rem;
}
.border-left-0 {
border-left: 0 !important;
}
.border-bottom-0 {
border-bottom: 0 !important;
}
.border-top-1 {
border-top: 1px solid black !important;
}
.span-2 {
grid-column-start: span 2;
}
.span-3 {
grid-column-start: span 3;
}
.span-4 {
grid-column-start: span 4;
}
.span-5 {
grid-column-start: span 5;
}
.span-7 {
grid-column-start: span 7;
}
.text-darkgreen {
color: darkgreen;
}
.text-red {
color: red;
}
.bg-yellow {
background-color: yellow;
}
.flex-end {
justify-content: flex-end;
}
footer {
display: flex;
flex-direction: column;
margin-top: 10px;
}
#itemsfooter {
text-transform: uppercase;
border-left: 0 !important;
}
#itemsfooter>div {
align-self: stretch;
display: flex;
align-items: center;
padding: 0 0.5rem;
}
#amountinwords {
flex: 75%;
}
#totalamount {
flex: 25%;
text-align: right;
border-left: 1px solid black;
}
#totalamount ol {
width: 100%;
}
#totalamount ol li:last-child {
font-size: x-large;
}
#invoiceinformation {
text-transform: none;
border-left: 0 !important;
display: grid !important;
grid: "note" "bankdetails" "signature";
grid-template-columns: minmax(min-content, 40%) minmax(min-content, 35%) minmax(min-content, 25%);
padding: 0 0.5rem;
}
#invoiceinformation div {
align-self: stretch;
align-items: center;
padding: 0 0.5rem;
}
/* #note {
flex: 40%;
} */
#bankdetails {
/* flex: 35%; */
border: 1px solid;
border-top: 0;
border-bottom: 0;
}
#signature {
display: flex;
/* flex: 25%; */
border-left: 0 !important;
padding-right: 0.5rem !important;
}
#message {
display: flex;
justify-content: space-between;
border-left: 0 !important;
border-bottom: 0 !important;
padding: 0 0.5rem !important;
}
@media print {
@page {
size: A4;
}
}
BRAND
CAPTION
TAG LINE
Address
TAX Invoice[/b][b]
[list]
[*]Phone:
[*]
[/list]
[list]
[*]Billed To
[*]ABC [/b][b] [*]Mobile:
[*]Address:
[/list]
[list]
[*]Shipped To
[*]ABC [/b][b] [*]Mobile:
[*]Address:
[/list]
[list]
[*]Invoice Details
[*]Invoice No: 2/2024-25[/b][b] [*]DC No: 2102[/b][b] [*]Invoice Date: 01 Apr 2024[/b][b] [*]Payment Mode: Credit[/b][b] [*]Payment Status: Due[/b][b] [/list]
S.No
Description
[/b][b] Days
Unit
Price
Unit Price
NOTE
Certified that the particulars
given above are true and correct
COMPANY BANK DETAILS
BANK:
ABC BANK, A/C. NO: 1111111111111111, IFSC: IABC0000000, Branch: DEF
Road, GHI
for ABC[/b]
Authorized Signatory
Все выглядит хорошо.
[img]https:/ /i.sstatic.net/OlsbL4e1.png[/img]
В режиме предварительного просмотра или при печати:
При печати появляется горизонтальная полоса прокрутки. Я проверяю это, устанавливая для параметра «Эмуляция медиа-типа CSS» значение «Печать».
[img]https:// i.sstatic.net/gwTL2M4I.png[/img]
Это нарушает макет при печати в PDF
Однако я заметил странное поведение, когда удаляю содержимое внутри вложенной сетки #invoiceinformation . Я прокомментировал узел внутри #note и #bankdetails, после чего горизонтальная полоса прокрутки исчезла.
Код: Выделить всё
Emulate CSS media type[img]https://i .sstatic.net/Hk6rlIOy.png[/img]
Печать в PDF после комментирования узла .
Вышеуказанный результат является ожидаемым, даже если у меня есть данные внутри узел . Поэтому я попытался установить ширину:100% для сетки #invoiceinformation, но она не работает.
Пожалуйста, помогите мне, что мне не хватает?
Подробнее здесь: https://stackoverflow.com/questions/784 ... print-mode
