CODEWITHSUNDEEP
htmlcsstwitter-bootstrapprinting
AJ-
AJ-

Reputation: 1783

Can't print correctly in landscape on A4 size with CSS (Bootstrap)

I have a html table with some data and it looks much better if printed in landscape mode.

so far the css code is:

@page {
    size: landscape;
    max-height:100%; 
    max-width:100%;
    margin-top: 1.2cm;
    margin-bottom: 1.2cm;
    margin-left: 1cm;
    margin-right: 1cm;
    width: 276mm;
    height: 190mm;
}

When you print it like this, all the divs that have some bootstrap rule (col-xs-6 for example) don't get printed correctly, meaning they print with a big side margin (at least 7-8cm on both sides).

I don't understand why this happens only in landscape, if I change the css to print in portrait, it prints correctly!

And I noticed that when I'm in the print preview (chrome) and if I select A5 instead of the default A4 size paper, magically the print preview shows the tables printed correctly, but of course I can't proceed to print like this because the printer asks for A5 paper.

Any idea why is this happening?

ps.: just posted the print css code, because besides bootstrap, there is no code on the tables and the div that cointains them that could disrupt the printing.

ps2.: with dev tools on chrome, before printing, If I select the divs containing the tables and remove the 100% width given by col-xs-12, it partially fixes the layout on the print preview, so I'm pretty sure it has to do with boostrap

Upvotes: 3

Views: 7522

Answers (1)

AJ-
AJ-

Reputation: 1783

after many trials I found a working solution myself,

@page {
    size: A4 landscape;
    size: 287mm 210mm;
}

I honestly don't know why it works, but when I define size to 287mm instead of the default A4 width of 297mm, it magically fixes itself

Upvotes: 3

Related Questions