Ionic Print without Sidemenu on Desktop

Issue

How do I effectively hide the sidemenu for printing only, when printing from desktop? I've tried adding CSS to ion-menu, which seems to work, except some things are still offset by the size of the menu (like headers). I'm sure there are other implications, such as different display resolutions or screen sizes if print is invoked from the browser.

Another thing I'm open to is having a whole new page just for printing, but I'm just trying to keep everything together so that I don't have to maintain two pages for the same thing.

Solution

Here are the rules I use for printable pages with Ionic :

@media print {
  ion-header, ion-backdrop, .tabbar, ion-footer, ion-content::part(background) {
    display: none !important;
  }
  ion-nav {
    contain: none;
    overflow: visible;
  }
  ion-split-pane {
    display: block;
  }
  .scroll-content,
  ion-modal,
  ion-modal .modal-wrapper,
  ion-modal .ion-page,
  ion-modal .ion-page > ion-content,
  .ion-page,
  .ion-page > ion-content,
  ion-split-pane,
  ion-tab,
  ion-tabs,
  ion-router-outlet,
  .app-root,
  ion-content::part(scroll),
  body {
    contain: none;
    position: initial;
    height: auto;
    overflow: visible;
  }
  .fixed-content, .scroll-content {
    margin-top: 0 !important;
  }
}

It should hide navigation components, and allow scrollable elements to remain fully visible. You can put it into a top-level CSS stylesheet instead of a component, so it applies to all your pages in print mode. Note that you may encounter "unmatched selector" warnings with ion-content::part, but it will work anyway.

Answered By - Alexis Deprez