CSS differences between [print invoice] and [download invoice]

  • Resolved yewzy

    (@yewzy)


    3 years, 3 months ago

    Hi there,

    I noticed a few differences between my invoice design for the print version and the pdf version. The print layout is the layout I am satisfied with.

    View post on imgur.com

    As can be seen from the image above, for the PDF version:
    1. The invoice number, date and order number is not aligned to the right. There seems to be a right margin which is not needed.
    2. The order description does not have the appropriate line height.
    NOTE: The line height CSS is defined through wf_pklist_add_custom_css as such:

    add_filter('wf_pklist_add_custom_css','wt_pklist_alter_line_height',10,2);
function wt_pklist_alter_line_height($custom_css,$template_type)
{
	if($template_type=='invoice')
	{
		$custom_css.='.product_td{line-height: 1.5em !important;}';
	}
	return $custom_css;
}

    I shall also note that I have installed the mPDF plugin and is using mPDF to generate these pdfs.
    Additionally, would it be possible to resize the width for the SKU and Order Description? Preferably the SKU should be much smaller in width, perhaps at 15%.

    Thank you!

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author WebToffee

    (@webtoffee)

    Hi @yewzy,

    Thank you for reaching out to us.

    We will look into it and will get back to you soon.

    Thread Starter yewzy

    (@yewzy)

    Noted. Thanks!

    Plugin Author WebToffee

    (@webtoffee)

    Hi @yewzy,

    Thanks for waiting. Since the issue needs to be fixed at the template level, we will address it in our upcoming release. Thanks for understanding. Feel free to write to us if anything.

    Thread Starter yewzy

    (@yewzy)

    Hi there

    I have applied the latest update, and the align right issue is resolved.
    However, the custom line height defined using wf_pklist_add_custom_cssis still not being displayed in the final PDF file.

    Plugin Author WebToffee

    (@webtoffee)

    Hi @yewzy,

    Thanks for getting back to us. Could you please use cm or px instead of em in the code. Check it in that way and let us know if anything.

    Thread Starter yewzy

    (@yewzy)

    Hi, I have changed to px and it is still the same issue. Print invoice displays fine but the line height in Download invoice’s PDF is too small.

    $custom_css.='.product_td{line-height: 16px !important;}';

    Plugin Author WebToffee

    (@webtoffee)

    Hi @yewzy,

    Thanks for sharing the information. Kindly make sure that you are using dompdf as pdf library (Invoice/Packing > General Settings > General > PDF library).

    Plugin Author WebToffee

    (@webtoffee)

    Hi @yewzy,

    This thread has been inactive for a bit. So we will go ahead and set this thread to resolve – please feel free to follow up on the ticket you have with us if you have further questions!

    Thread Starter yewzy

    (@yewzy)

    Hi, unfortunately DOM pdf does not work nice with Chinese characters. Do you have another option?

    Plugin Author WebToffee

    (@webtoffee)

    Hi @yewzy,

    Thanks for sharing the information.

    Since you are using mpdf, kindly replace the previously added code snippet with this modified code and check. Let us know if anything.

    Thread Starter yewzy

    (@yewzy)

    Thank you so much. I can confirm that it is working now!
    A follow up question, is there a way for us to adjust the width of the product table?
    Eg. I want my SKU column to be only 10%

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘CSS differences between [print invoice] and [download invoice]’ is closed to new replies.