Duplicate content when printing the page

Asked

Viewed 63 times

1

was setting up a page to print with @media print, but when you click on print the content appears duplicated on two different sheets.

HTML

<div id="printable">CONTEÚDO</div>

CSS

@media print {
    * {
        background: transparent;
        color: #000;
        text-shadow: none; 
        filter: none;
        -ms-filter: none;
    }

    body * { visibility: hidden !important; }
    #printable, #printable * { visibility: visible !important; }
    #printable {
        position: fixed;
        left: 20px;
        top: 15px;
    }
}
html css media-queries

2 answers

1


This is a standard position:Fixed behavior!

Behold

Fixed
Do not Leave space for the element. Instead, position it at a specified position relative to the screen’s viewport and don’t move it when scrolled. When Printing, position it at that Fixed position on Every page. This value Always create a new Stacking context.

Summarizing An element with position:Fixed repeats on every page!

Suggestion, here put position: relative; and evaluate. Depending on position:Bsolute; may work better, you will have to test there. Remember that the position pattern for the body is any other element is position: Static;

body * { visibility: hidden !important; }
#printable, #printable * { visibility: visible !important; }
#printable {
    position: relative;
    left: 20px;
    top: 15px;
}

Source: https://developer.mozilla.org/en-US/docs/Web/CSS/position

  • I understood, but when changing the position the content appears almost at the end of the page, since the visibility: Hidden only hides the elements.

  • @Elisoliveira, as I said, the reason for the duplicity of the content is position:fixede. Now if you are with another cosy problem to open another Question and put your new problem. I think you already know why it is happening... Now like you’re gonna do to fix it, it’s not to help you without more hints. The tip was to change the position, if you changed and spoiled something else now your problem is no longer duplicity...

1

As Geremias said the problem was the "position: Fixed", but as the content I wanted to print was almost at the end of the page and the "visibility: Hidden" just hides the content, there was a lot of white space above and below. The solution I found, although far from ideal was to create another class and put on the Divs that would not be displayed, thus staying:

    * {
        background: transparent;
        color: #000;
        text-shadow: none; 
        filter: none;
        -ms-filter: none;
    }
    .no_print { display: none !important; }
}

Thanks!!

Browser other questions tagged html css media-queries

You are not signed in. Login or sign up in order to post.