Hello,
I will like to change column width at invoice.
Is anyone done this?
I know that it can be done using custom CSS.
If someone has an example of custom CSS to do this, it will help.
Regards
You need to customize the data-ref=“product_table-product” in include tag in the design view.
It’s hard explain and most of the time would be try and error.
1 Like
Can you please send me your invoice example?
I hope I can figure it out with that.
I just do some change but not much.
[data-ref=“product_table-product.item-th”] {
width: 120px;
}
[data-ref=“product_table-product.description-th”] {
width: 40%;
}
Thanks!
I have done it like this:
[data-ref=“table”] > thead > tr > th:first-child {
width: 3%;
}
[data-ref=“table”] > thead > tr > th:nth-child(2) {
width: 46%;
}
[data-ref=“table”] > thead > tr > th:nth-child(3) {
width: 5%;
}
[data-ref=“table”] > thead > tr > th:nth-child(4) {
width: 9%;
}
[data-ref=“table”] > thead > tr > th:nth-child(5) {
width: 16%;
}
[data-ref=“table”] > thead > tr > th:nth-child(6) {
width: 7%;
}
[data-ref=“table”] > thead > tr > th:nth-child(7) {
width: 5%;
}
[data-ref=“table”] > thead > tr > th:nth-child(8) {
width: 9%;
}
2 Likes
In the case It can help someone else, I am posting this self note in the event I need to modify the width of the totals at the bottom of the invoice again later and I forget.
To adjust witdh of the “Totals” section, modify the “fraction value” of each columns. “fr” CSS unit (new to me).
In my case, to edit the invoice totals, I did this in the “Includes” (see adjustements in bold):
*note, there is an invisible gap of 80px in the middle
#table-totals {
margin-top: 0rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
padding-top: 0.5rem;
padding-bottom: 0.8rem;
padding-left: 0.7rem;
page-break-inside:auto;
overflow: visible !important;
}
#table-totals .totals-table-right-side>* {
display: grid;
grid-template-columns: 7fr 3fr;
}
1 Like