Skip to Content
Menu
This question has been flagged
3 Replies
5929 Views

Hi,

I'm trying to create a pallet label report to print on a 4x6 label printer.  The report fits best landscape, but the print drivers do not rotate landscape pages.

What I need to do is build a landscape report, and rotate it 90 degrees to fit on a portrait-oriented pdf page.

The report I have works, if I open it in an external editor, switch to portrait, and rotate the contents.

Is there an easy way to do this, or will I need to rebuild the report, using rotated text elements and images, to make this work?

I am using Enterprise Hosted Odoo 11.0

Thanks,

John

Avatar
Discard
Best Answer

Try to wrap all your elements inside a report into the div with the attribute 'transform'. An example of the style for the div class 'rotated':

.rotated {transform: rotate(90deg);}

Not sure it will work fully correctly. Perhaps, there would be still a need to change some element classes. 

UPDATE

Reports styles differ from website styles. You either need to pass those styles right in the report, or, simpler in that case, assign the style right in the qweb xml:

<div style="-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-ms-transform: rotate(90deg);transform: rotate(90deg);"></div>

P.S. I haven't tested this solution, it is just my idea.



Avatar
Discard
Author Best Answer

Thank you,

So far it doesn't work... but I'll play with it.  I applied the style to the class="page article" element, and to the one child below the page element (a table). In both cases it showed the content rotated 90 degrees in the web preview, but not in the final printed PDF.

Perhaps that's a CSS property not supported well by wkhtmltopdf?

Thanks,

John

(I would have posted this as a comment to your answer, but not enough Karma yet)


Update:

The solution requires a blend of Odoo Tools' and Anu's answers.  In experimenting, I found that the version of wkhtmltopdf used by hosted Odoo 11 does not support transform unless it is prefixed. It uses webkit to render, so this *does* work in the preview, and in print:

<div class="page article" style="transform: rotate(90deg); -webkit-transform: rotate(90deg);">

What made this confusing is that the non-prefixed property works fine in the preview, because of course I'm using a current browser.



Avatar
Discard

look at the updated answer

Author

Yes, I did apply style in-line. Sorry, I mentioned the classes to identify the element that was styled...

<div class="page article" style="transform: rotate(90deg);">

I also tried moving the style up and down the parentage, with similar results.

Author

Please update to add the webkit prefix for wkhtmltopdf, and I'll mark as the correct answer. :)

yes, sure. It definitely depends on a browser. I have added into my answer styles from various browsers, as the accepted answer on the SO - https://stackoverflow.com/questions/14233341/how-can-i-rotate-an-html-div-90-degrees

Author

Actually, that's the problem: it doesn't matter what browser you use, it won't print that way without the webkit vendor prefix, because the client browser doesn't render the PDF... it's the webkit engine in wkhtmltopdf.

It is correct. Thank you for sharing the results of your investigation! Just toggled like for your question

Best Answer

Hi,

   use this css

.rotate {

/* Safari */
-webkit-transform: rotate(90deg);

/* Firefox */
-moz-transform: rotate(90deg);

/* IE */
-ms-transform: rotate(90deg);

/* Opera */
-o-transform: rotate(90deg);

/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

                                                                                                   

Avatar
Discard
Related Posts Replies Views Activity
1
Jul 15
4415
0
Jun 24
831
0
Jan 21
804
2
Apr 20
8964
2
Aug 19
3329