printing full div

[hawkrdg]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [ ] feature request
- [x] question

OS and Version?

Windows 7 10

Versions

cli v7.1.1 npm v6.4.1 ngx-scrollbar v4.2.0

Repro steps

printing a that is more than one page. What I have is:

<ng-scrollbar> <h1>A Heading</h1> <div> <!-- complex collection of data driven display blocks --> </div> * * * <h1>A Heading</h1> <div> <!-- complex collection of data driven display blocks --> </div> </ng-scrollbar>

and these generate between 3 - 6 pages what I have tried in my style.styl is

@media print { ng-scrollbar; overflow: visible !important; }

and this works for an ordinary div with standard scrollbars. What I get is just the first full page (which is more than is shown on the screen), but the rest does not print.

I simply don't know what tags, classes to address in @media print to fix this. This comes from a complicated data driven gallery of fretboard chord layouts and the scrollbar works fine on the browser page.

if this is simply fixed with the proper CSS, please let me and others know, otherwise I can try and setup a running example

[MurhafSousli]

I don't know much about printing, can you provide a stackblitz reproduction / screenshots?

[hawkrdg]

OK, haven't got a stackblitz, but I stripped out the problem module and built a test app: hawkrdg.com/ng-scrollbar. The issue is when printing stringsets. What I did as a kludge was to have two separate dsiplays, One with native scrollbars & one with ng-scrollbar. When the user prints, I use *ngIf to switch to native scrollbars and this works, but is a kludge. The demo has two print buttons: :<) & :<( so you can see the results. I tried forcing each of the ng-scrollbar divs into overflow: visible but that didn't fix the problem. So there must be more css that needs addressing. I looked at the scss files and didn't find any @media print sections. The scrollbar works just fine on display and looks great, easily themed with the css you show on the site. It would be great if it would print like native scrollbars. Any way I can help in testing, etc. let me know... Also, it would be great, since you are using material to be able to say: <ng-scrollbar color="primary or accent"> so whatever theme one is using folds into the scrollbar. I have included the code for the chord section... chord tool.zip

[andrii-kasparevych]

@hawkrdg @MurhafSousli I know its been some time since this question was asked, but now I wonder myself how to solve this issue. Any ideas are welcome :)

[MurhafSousli]

It is probably some CSS thingy, There isn't much difference between this plugin and a native scrollbar besides using overflow: auto, hiding the native ones and displaying an overlay scrollbar.

[hawkrdg]

I just switched all my UI to angular/material and let that handle everything - one less dependency...