EventListener to set shadow-root styles

[KorbinianKuhn]

Thank you very much, you already helped me very much. Maybe we can put your approach into an npm-package?

I created an event listener, to set position property:

if (window.matchMedia) {
  const mediaQueryList = window.matchMedia('print');
  mediaQueryList.addEventListener('change', (mql) => {
    if (mql.matches) {
      document.querySelectorAll('ion-content').forEach((element) => {
        const scroll = element.shadowRoot.querySelector('.inner-scroll') as HTMLElement;
        scroll.style.position = 'relative';
      });
    } else {
      document.querySelectorAll('ion-content').forEach((element) => {
        const scroll = element.shadowRoot.querySelector('.inner-scroll') as HTMLElement;
        scroll.style.removeProperty('position');
      });
    }
  });
}

Also I extended the styles because I had some problems with (ion-tabs, ion-split-pane):

body {
  position: relative !important;
  max-width: unset !important;
  height: unset !important;
  max-height: unset !important;
  overflow: visible; /* enable scroll on body */
}

ion-app,
ion-router-outlet,
ion-content,
ion-split-pane,
ion-tabs,
.ion-page:not(.ion-page-hidden),
.tabs-inner {
  position: relative !important;
  contain: unset !important;
  display: block !important;
  overflow: unset !important; /* remove default overflow hidden */
}

[KorbinianKuhn]

So I finally got a solution that is working so far. An EventListener on MediaQuerys is not working, as it detects the change too late. Therefore the I always got only one page, even if I had a long list. But listening on onbeforeprint and onafterprint works like a charm. I created a PrintService listening on these events and then changing the shadow-root of the scroll-contents.

I'd really like to transform this into an npm-package. Maybe with some kind of config and defaults (hiding tabs, restyling segments and headers, hide menus, ...).

Preview

print.service.ts

import { DOCUMENT } from '@angular/common';
import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class PrintService {
  constructor(@Inject(DOCUMENT) private document: HTMLDocument) {}

  init() {
    window.onbeforeprint = () => this.setPrintStyles(true);
    window.onafterprint = () => this.setPrintStyles(false);
  }

  private setPrintStyles(add: boolean) {
    this.document.querySelectorAll('ion-content').forEach((element) => {
      const scroll = element.shadowRoot.querySelector('.inner-scroll') as HTMLElement;
      if (add) {
        scroll.style.position = 'relative';
      } else {
        scroll.style.removeProperty('position');
      }
    });
  }
}

print.css

I'll post all my CSS. There might be some settings that might not be necessary, we just have to find out.

@media print {
  * {
    overflow: visible !important;
  }

  body {
    position: relative !important;
    contain: none !important;
    display: block !important;
    max-width: unset !important;
    height: auto !important;
    max-height: unset !important;
    padding-left: 10px;
    padding-right: 20px;
  }

  app-root,
  ion-app,
  ion-router-outlet,
  ion-content,
  ion-split-pane,
  ion-tabs,
  .ion-page:not(.ion-page-hidden),
  .tabs-inner {
    position: relative !important;
    contain: none !important;
    display: block !important;
    height: auto !important;
  }

  ion-list {
    display: block !important;
  }

  ion-item {
    display: block !important;
    contain: unset !important;
    page-break-inside: avoid !important;
  }

  :root {
    height: auto !important;
    --ion-toolbar-background: none !important;
    --body-background-color: none !important;
    --ion-background-color: none !important;
    --ion-text-color: #000 !important;
    --ion-padding: 0 !important;
  }

  ion-menu,
  ion-tab-bar,
  ion-buttons,
  ion-fab-button,
  ion-segment-button:not(.segment-button-checked),
  ion-toggle,
  ion-popover,
  ion-modal {
    display: none !important;
  }

  ion-header {
    &:after {
      display: none;
    }
  }

  ion-segment {
    --border: none !important;
    justify-content: flex-start !important;
  }
  ion-segment-button.segment-button-checked {
    --ion-color-base: none;
    ion-label {
      align-self: flex-start;
      text-transform: none;
      font-size: 20px;
      font-weight: bold;
      color: var(--ion-text-color) !important;
      transform: translateX(-6px);
    }
  }

  ion-toolbar {
    --ion-toolbar-background: none !important;
    --ion-toolbar-color: var(--ion-text-color) !important;
    ion-title {
      margin-left: 10px;
    }
  }
}

[jxhnlcs]

Thanks, this help me so much!