Word wrap on sender address - standard invoice template

[mlawson]

Hi,
The standard invoice style appears not to have a word wrap on the ‘From’ address box, even though the layout shows a delimited box to the left of the word ‘Invoice’ (problem shown below):

Other invoice styles chosen from the gallery do wrap the ‘From’ address.

Is it possible to introduce a word-wrap (or create a variant style if you’re concerned about breaking others’ invoices who are using the standard style)?

Thanks

Martin

[QFMathew]

Hi @mlawson

The good news is, you can actually change this yourself with a little bit of CSS. The difference between this template and others, is the box that the address is in doesn’t have a set width, so it’ll stretch as wide as needed.

If you go to the Invoice Style Gallery (top left - green box), and find the template you’re using, then click 'Customise This Style, it will reveal a CSS panel for you to edit.

If you’re not familiar with CSS, don’t panic! You simply need to make one small change.

Find:

.senderAddressDetails

This is around line 40.
Simply add a line straight underneath it to add the width. About 200px should be enough:

width: 200px;

And save it. Job done!

For clarity, this now shows as follows for me:

 .senderAddressDetails {
	height:120px;
	width: 200px;
	position:static;
	text-align:left;
	vertical-align:top;
	margin-top:15px;
	margin-bottom:38px;
	padding-left:20px;
}

Hope that helps, but please don’t hesitate to let me know if we can help further

[mlawson]

Brilliant, that worked. Thanks for the quick and clear explanation.