Print Style Sheets for Ionic Framework

In the digital era, when we are able to send messages to the other side of the planet within a seconds. Still, sometimes there is need to keep some sort of data in a classic way – on the paper.

 

I suppose that most of you are familiar with styling web for print. But did you try to style some print-view in applications developed with Ionic framework? In this article I will show you how to print a page in ionic-view using CSS @media print.
CSS @media types are one of the coolest features provided in style sheets. They were introduced in CSS2 and they are being used to define different style rules for different media types.

First, let’s take a look on our example Ionic application. Our view which we are going to style for print will be simple listing with 1000 items. Each item has default avatar, title and subtitle. Each even item has grey background-color. Also there is a side menu displayed – but we don’t need it in our printed documents. Below you can find view from our application on desktop:
Ionic Print stylesheet 1

 

And here you can see how our print preview looks like now, without any extra styling:
Ionic Print stylesheet 2

 

It’s awful, with some crazy borders, ugly side menu and with just one page of data. You will probably ask: “where is the rest of items (978)?” Don’t panic, they are there, nothing bad has happened to them. Unfortunately the rest of items are hidden. This might be quite unusual for you because all of the items are visible during scrolling but in print preview, content which is outside of the screen is hidden. It is the result of default Ionic styling. Let’s try to solve this problem. Our goal is to achieve something like this:
Ionic Print stylesheet 3

 

Create and include new stylesheet for print view. You can name it print.css or something like that. We will put all of our styles inside the @media print {...} query. We have to do that to let the document know that we want to apply those styles only for print. First step is to reset height, overflow and position attributes for ionic components. I will start from html tag and then i will go deeper and deeper. Take a look on some code snippet:

@media print {
  /* Reset height */
  .view-container,
  .pane, 
  .view {
    height: auto;
  }
  /* Reset position */
  .view-container,
  .pane,
  .view,
  .scroll-content {
    position: static;
  }
  /* Reset overflow */
  html,
  body,
  .pane,
  .view,
  .scroll-content {
    overflow: visible;
  }
}

Let’s see how our print preview has changed:
Ionic Print stylesheet 4

 

It still doesn’t look good, but at least we have all of the data included in print preview. Next step is to hide side menu and top navbar with title. To do that just simply set display:none; to menu and nav-bar-container classes which are responsible for this parts of design.

@media print {
  /* Reset height */
  .view-container,
  .pane,
  .view {
    height: auto;
  }
  /* Reset position */
  .view-container,
  .pane,
  .view,
  .scroll-content {
    position: static;
  }
  /* Reset overflow */
  html,
  body, 
  .pane,
  .view,
  .scroll-content {
    overflow: visible;
  }
  /* Hide side menu and navbar */
  .menu,
  .nav-bar-container {
    display: none;
  }
}

Result:
Ionic Print stylesheet 5

 

Much better, isn’t it? Let’s turn off this ugly borders and highlight even items with some background-color property.

 
(...)
  /* Remove borders from item */
  .item {
    border: none;
    -webkit-print-color-adjust: exact;
  }
}

The -webkit-print-color-adjust property is a non-standard CSS extension. But you can use it to force printing of background colors and images in browsers based on the WebKit engine. There is no cross-browser solution, but in this case it is acceptable. Thanks to this simple style rules, we achieve our goal and we can print all of our data in nice looking way. But there is one more thing to do. We have to set that none of the items would be break over two pages. It would be printed on one page. Below you can find full code snippet and the result it gives us:

@media print {
  /* Reset height */
  .view-container,
  .pane,
  .view {
    height: auto;
  }
  /* Reset position */
  .view-container,
  .pane,
  .view,
  .scroll-content {
    position: static;
  }
  /* Reset overflow */
  html,
  body,
  .pane,
  .view,
  .scroll-content {
    overflow: visible;
  }
  /* Hide side menu and navbar */
  .menu,
  .nav-bar-container {
    display: none;
  }  
  /* Remove borders from item and allow to print background */
  .item {
    border: none;
    -webkit-print-color-adjust: exact;
  }
  /* Avoid page break inside the item */
  .item {
    display: inline-block;
    width: 100%;
  }
  .item:after {
    display: block;
    height: 0;
    overflow: hidden;
  }
}

Ionic Print stylesheet 6

I hope that you found this tutorial valuable and interesting. If you have any questions feel free to contact me anytime or comment in comments section.

–>Learn about BEM methodology.<–

 

SIMILAR ARTICLES

Tomasz Krajewski on sabemail
Tomasz Krajewski
Front-end developer at PrimeModule
I am interested in modern technologies, strongly focused on JavaScript. I find keeping the code clean and legible really important. Best thing I love in my job is that each project is unique, which makes my work truly fascinating.

3 thoughts on “Print Style Sheets for Ionic Framework

    • Hi Elias, thanks for your comment.
      I think that the best solution is to apply /avoid page break block/ (from the article) to the row element. I hope that this answers your question and solves your problem.
      All the best,
      Tom

      • I tried but ended up with no success,
        /* Avoid page break inside the item */
        .row {
        display: block;
        width: 100%;
        }
        .row:after {
        display: block;
        height: 0;
        overflow: hidden;
        }
        I’ve tried without :after too, I tried everything but still can’t do it.

Leave a Reply

Your email address will not be published. Required fields are marked *