javascriptcssprintingmodal-dialogionic-v1

On Chrome ion-modal-view long contents printing is not allow all pages

I have searched and tried as posted articles. such as

@media print {
  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    visibility: visible;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  .modal-dialog {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
}

It's exactly work for bootstrap modal view. But it's not working on ion-modal-view which has long contents.

A strange point... if page is desktop mode https://d.pr/i/Rl8VFR, then window.print() is working for all pages. but if page is mobile mode https://d.pr/i/NO4fbI, then window.print() is only print first page.

Do you have any idea to solve this problem on ion-modal-view long contents?

Thanks in advance.

Solution

  • Solved issue with a simple modify in printing styles. When the ionic modal is activated, <body> tag have height: 100% property. It was a reason to not allow all pages printing. So when you use print on ionic modal view, you must set

    body { height: auto !important; }

    It will help. This solution is exactly working on ionic v1. Thanks