Is it possible to exclude parts of the main window for printing purposes?

Support
#1

Hi,

I would like to have a user use the normal browser printing but exclude some parts of the main window on the printing output. I’ve tried to set a media specific style but it doesn’t do anything.


/* Leave out header and navigation panel for printing */
@media print {    
    .responsive-header {
        display: none !important;
    }
	.navPanel {
		display: none !important;
	}
}

When I apply these style definitions directly (without the @media print), the elements disappear as expected but when applied to printing oonly, they remain included during print.

Any suggestions?

#2

Hello, Berend.

To allow @media statement to work, it must be placed at the top most level of CSS. For example:

halo-ext.scss


/* Define your theme modifications inside next mixin */
@mixin com_company_demo-halo-ext {

}

@media print {
  .c-app-menubar,
  .v-tabsheet-tabcontainer-c-main-tabsheet {
    display: none;
  }
}

> Notice that @media placed at the same level that @mixin com_company_demo-halo-ext, not inside it.

I’ve prepared a demo project at github, in which the main menu and tabs of the main tab sheet are hidden while printing.

Regards,

Gleb

#3

Hi Gleb,

Thank you, this improves it a lot indeed. But somehow, the page doesn’t get re-rendered when opening the print dialog. This means that parts of the page are hidden but their space is still reserved for by the main window container (through padding). When I emulate the printing mode in the browser and then refresh the window (forcing a rerender), this space is not used anymore and it looks ok.

I also ran your example project and it seemed that the space of the header completely disappeared from the printing. If so could not find anything special that would cause this to work this way.

I’m not sure this can be solved but maybe you know what to do about it?

#4

Is your issue reproduced in all browsers or only in certain?

#5

Both in Edge a Chrome it works the same (space still reserved for)

#6

As I understand, you are using custom UI and/or styles for our UI, and try to hide them when printing. Could you please attach a small project with your changes, so I will have a look and try to help you.

#7

Hi Gleb,

Thanks for looking into this. I’ve attached an excerpt from my project. In this one the menu on the left does disappear when the print rendering is activated but the space is not used by the remaining of the page. When you do a refresh while in printer rendering mode, the content appears correctly.

Hope this helps you find the problem.

TestProject.zip (689.2K)

#8

So, I can suggest you a little workaround. Set stylename to your mainBox in ext-mainwindow, for example stylename=“main-box”. Then, add the code below to @media print:


.main-box {
  .v-expand:first-child {
    padding-left: 0 !important;
    .v-slot-navPanel {
      margin-left: 0 !important;
    }
  }
}

The full code of @media print should look like this:


@media print {
  .header {
    display: none !important;
  }
  
  .navPanel {
    display: none !important;
  }

  .main-box {
    .v-expand:first-child {
      padding-left: 0 !important;
      .v-slot-navPanel {
        margin-left: 0 !important;
       }
    }
  }
}

Regards,

Gleb

#9

Brilliant! Had to tweak it a little in my main app but this works perfectly. Thanks!