How to adjust the ITEM column width on quote /invoice?

Self-Hosted | v5
1

Trying to figure out the best way to adjust the ITEM column width on my quotes. The column is just too wide, so I’d like to make it smaller. What’s the best way to accomplish this?

The docs are a bit confusing to me as when I click the ‘Customize’ button, there’s no line items to actually inspect so I can’t determine the appropriate date-ref selector.

image
image703×582 120 KB

Note that I did try the following:

[data-ref="product_table-product.product1-th"],
[data-ref="product_table-product.product1-td"] { width: 15%; }

But for some reason adding that to the Includes tab breaks the table totals section of the quote/invoice. It does resize things to what I want, however.

It’s been a minute since I messed with HTML/CSS, though, so I may be doing something wrong.

2

Hi,

@david can you please advise?

3

@ahelton

The target elements are here:

You’ll want to do something like this:

[data-ref="product_table-product.item-th"] { 
    width:10%; 
}
4

Thanks, David. I fiddled around and eventually got it look approximately the way I wanted.