Hello,
does an collection of invoice designs exists?
So actually i came from ninja v4 and now i need a new design. I started coding a new design but think it is very complicatet. Thanks for help!
Hi,
The app comes with a collection of designs built-in, we don’t have any others to share.
OK. I thought I could have exchanged it with someone. I currently have the problem that the product table runs into the footer or that the invoice conditions run into the footer.
It may help to increase the page’s bottom margin or padding.
OK. I currently have the following problems with my design:
- If a table row contains a lot of text so that a row does not fit on the first page, then the row destroys the footer on the first page. But I would like to have a clean finish up to a few px from the footer. On the second page, the table should start again with a header row and can also contain the first column with the article.
Maybe someone could help me? I’m starting to get a little desperate.
Here my code:
Input:
<div id="body">
<div class="header-wrapper">
<img class="company-logo" src="$company.logo" alt="$company.name logo">
<div id="company-details"></div>
<div id="company-address"></div>
</div>
<div class="header-wrapper-details">
<div id="1"></div>
<table id="entity-details" cellspacing="0"></table>
</div>
<div id="from">My Company Name</div>
<div id="client-details"></div>
<p class="entity-label">$entity_label</p>
<table id="product-table" cellspacing="0"></table>
<table id="task-table" cellspacing="0"></table>
<div id="table-totals" cellspacing="0"></div>
<table id="delivery-note-table" cellspacing="0"></table>
</div>
Header:
<div id="header-wrapper"></div>
Footer:
<div id="footer"></div>
<div class="footer-wrapper" id="footer">
<div>Name<br>Name<br>Street<br>Place<!-- #1 column --> </div>
<div>Bank<br> Banknumber<br> Banknumber2<br> Bankname<!-- #2 column --> </div>
<div>Phone
<br>E-Mail<br>Internet<br>VAT<!-- #3 column --> </div>
</div>
CSS:
<style id="style">
:root {
--primary-color: $primary_color;
--secondary-color: $secondary_color;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: $font_name, Helvetica, sans-serif;
font-size: $font_size !important;
zoom: 100%;
}
[data-ref="product_table-product.product1-td"] { display: none; }
@page {
margin: $global_margin;
margin-top: 3rem;
margin-bottom: 0.5rem;
margin-left: 4.5rem;
margin-right: 3.5rem;
size: $page_size;
}
p {
margin: 0;
padding: 0;
}
.header-wrapper {
display: grid;
grid-template-columns: 1.5fr 0.6fr 0.6fr;
}
.header-wrapper-details {
display: grid;
grid-template-columns: 1.5fr 1.2fr;
}
.header-wrapper .company-logo {
height: 5rem;
}
.header-wrapper #company-address {
display: flex;
flex-direction: column;
font-size: 14px;
}
.header-wrapper #company-details {
display: flex;
flex-direction: column;
font-size: 14px;
}
.header-wrapper-details #entity-details {
margin-top: 10rem;
text-align: left;
width: 100%;
}
.header-wrapper-details #entity-details > tr,
.header-wrapper-details #entity-details th {
font-weight: normal;
}
.header-wrapper
#entity-details
[data-element='entity-balance-due-label'],
.header-wrapper
#entity-details
[data-element='entity-balance-due'] {
background-color: #e6e6e6;
}
#from {
font-size: 10px;
text-decoration: underline;
margin-top: -5rem;
}
#client-details {
display: flex;
flex-direction: column;
margin-top: 0.5rem;
}
.entity-label {
text-transform: uppercase;
margin-top: 5.0rem;
font-weight: bold;
color: black;
font-size: 30px;
}
.public_notes {
margin-top: 0rem;
}
#product-table,
#delivery-note-table,
#task-table {
min-width: 100%;
table-layout: fixed;
overflow-wrap: break-word;
margin-top: 2rem;
margin-bottom: 0rem;
}
.task-time-details {
display: block;
margin-top: 5px;
color: grey;
}
#product-table > thead,
#delivery-note-table > thead,
#task-table > thead {
text-align: left;
}
#product-table > thead > tr > th,
#delivery-note-table > thead > tr > th,
#task-table > thead > tr > th {
padding: 0.8rem;
background-color: #eeeeee;
border: 0.1rem solid #000;
border-collapse: collapse;
border-spacing: 0px;
}
#product-table > thead > tr > th:last-child,
#delivery-note-table > thead > tr > th:last-child,
#task-table > thead > tr > th:last-child {
text-align: right;
}
#product-table > tbody > tr > td,
#delivery-note-table > tbody > tr > td,
#task-table > tbody > tr > td {
border: 0.1rem solid #000;
border-collapse: collapse;
padding: 0.5rem;
text-align: left;
}
#product-table > tbody > tr > td:nth-last-child(-n+3),
#delivery-note-table > tbody > tr > td:nth-last-child(-n+3),
#task-table > tbody > tr > td:nth-last-child(-n+3) {
text-align: center;
}
#product-table > tbody > tr > td:last-child,
#delivery-note-table > tbody > tr > td:last-child,
#task-table > tbody > tr > td:last-child {
text-align: right;
width: 17%;
page-break-inside: avoid;
}
[data-ref="total_table-public_notes"] {
#display: none;
page-break-inside: avoid;
margin-top: -1rem;
}
#table-totals {
display: grid;
grid-template-columns: 2.5fr 1.6fr;
padding-top: 0em;
padding-left: 0rem;
gap: 2rem;
page-break-inside: avoid;
}
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 1fr 1fr;
page-break-inside: avoid;
}
#table-totals>.totals-table-right-side>*> :nth-child(1) {
text-align: left;
}
#table-totals>.totals-table-right-side>*> :nth-child(2) {
text-align: right;
}
#table-totals
> *
[data-element='total-table-balance-due-label'],
#table-totals
> *
[data-element='total-table-balance-due'] {
font-weight: bold;
}
#table-totals > * > :last-child {
text-align: right;
}
tfoot.page-footer {
display: table-footer-group;
}
.footer-wrapper {
margin-top: 1rem;
#background-color: transparent;
height: 40px;
font-size: 10px;
min-width: 100%;
position: fixed;
bottom: 0;
padding-top: 5rem;
padding: 1rem 3rem;
padding-left: 0rem;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
}
</style>
Any ideas?
I Need help with the CSS.