How to fix css for iphone printing

Question

I am using angular 7 platform and created photos slider component.

In that component there is print span that on click it use window.print().

on mac and windows it print the image full width but on iPhone the image is small inside a big white (on the left).

I prefer to fix my code but if there any other browser that not follow safari limitations on iPhone and fix it than it also good enough solution for me. (chrome same issue).

any suggestions?

I tried use media queries found in search.
also found directive which works best for me on mac (safari) and windows (edge/chrome). Printing HTML content.

Edit: 3: I edit my Directive and now it also print well on mac using dev tools as responsive iPhone safari but on iPhone it still the same just now it added 5 more blank pages.

Directive:

import { HostBinding, Directive, AfterViewInit, OnDestroy } from @angular/core";

@Directive({
    selector: '[print-section]',
  })
  export class PrintSectionDirective implements AfterViewInit, OnDestroy {
    @HostBinding('class.print-section') private printSection = true;
    private style: HTMLStyleElement;

    public ngAfterViewInit() {
      this.style = document.createElement('style');
      this.style.type = 'text/css';
      this.style.innerText = `
      @page {
        size: A4;
        margin: 0;
      }
      @media print {
        body * {
            width:100% !important;
            height:100% !important;
            padding:0 !important;
            margin:0 !important;
            visibility: hidden;
        }
        html, body {
            width: 210mm;
            height: 297mm;
        }
        .print-section, .print-section * {
            width:100% !important;
            height:100% !important;
            padding:0 !important;
            margin:0 !important;
            right: 0;
            left: 0;
            visibility: visible;
            overflow-x:hidden;
        }
        img {
            width:100% !important;
            height:100% !important;
        }
      }`;

      document.head.appendChild(this.style);
    }

    public ngOnDestroy() {
      document.head.removeChild(this.style);
    }
  }

HTML:

<div id="myModal" class="modal" (keydown.ArrowLeft)="previous()" (keydown.ArrowRight)="next()">
    <span class="close" (click)="close()">×</span>
    <span class="print" (click)="print()">Print</span>
    <div class="container-fluid">
        <div class="row align-items-center">
            <div class="col-md-1 d-none d-md-block">
                <button id="right" (click)="next()"><</button>
            </div>
            <div class="col-md-10 col-12" print-section>
                <img class="modal-content" id="orderImage" [attr.src]="getUrl()">
            </div>
            <div class="col-md-1 d-none d-md-block">
                <button id="left" (click)="previous()">></button>
            </div>
        </div>
        <div class="row d-md-none">
            <div class="col-1"></div>
            <div class="col-2 width-100 text-right">
                <button id="right" class="m-1" (click)="next()"><</button>
            </div>
            <div class="col-6 width-100 text-center">
                <button id="print" class="m-1" (click)="print()">Print</button>
            </div>
            <div class="col-2 width-100 text-left">
                <button id="left" class="m-1" (click)="previous()">></button>
            </div>
        </div>
        <div class="row text-center">
            <div id="caption"></div>
        </div>
    </div>
</div>

I expect the image will be full width on iPhone printing.

CLL · Answer 1 · 2019-06-20T14:20:56.067

A good way to test print-specific styling is to remove the print media query until it is styled to your specs in-browser and only apply it under the print media query when it is finished.

In your case, setting img to 100% width makes the image take 100% width of its container (except in some less-common cases where non-static positioning is used, etc.). I expect the img is not spanning 100% width because the classes applied to its parent do not span the full width. You would have to create print-specific css for these classes (and any parents of these restricting width, as well).

How to fix css for iphone printing

1 Answers1