Html Question posted in
Some basic documentation can be found here.

Html – Page contents not printing completely in portrait view

I am working on print functionality enabling in angular for a particular page. So, when I am giving print for that page, earlier it was showing blank content.

In below div, I am calling the component (app-event-container) that is loading that page.

<div class="event-main-container">
  <app-event-container
  [m1]="mockdata1"
  [m2]="mockdata2"
 >
</app-event-container>
</div>

So, I did some css changes like below in host level of <app-event-container component and after changes my print was working fine in landscape view

:host {
  overflow: visible;
  position: absolute;
}

So the issue is even though its printing whole contents in landscape view, its cutting right most portions in portrait view.

As I know portrait view is little narrower, but is there any way so that I can see the whole contents irrespective of landscape or portrait?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks @Flacuchentxox

    After few attempts finally I got it the way I wanted

    @media print {
  overflow: visible;
  position: absolute;
  transform-origin: top left;
  @media (orientation: portrait) {
    transform: scale(0.7);
  }
}

  2. 0

    You can use media querys of CSS inside @media print to adjust the elements you need to adjust based on the screen width pixels. (You can aswell use orientation portrait)

    @media print {

 @media print and (max-width: 500px) { /*Your desired width*/
    /* Change whatever element you need to adjust*/
    .example {
    transform: scale(0.8);
    }
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search