Printing items in a scrollable list - items are cut off

[xlegs]

I have a list formatted as such:

<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let item of items$ | async">
                     ..............
        </ion-item>
    </ion-list>
</ion-content>

I want to print it, but because the list scrolls, only the items that fit on the first page show up. The rest of the list is cut off. I’ve tried to rectify this using these @media print styles, but to no avail:

scroll-content {
	position: relative;
	overflow: visible;
	height: 100%;
}

Is there a way to print the entire list?

Thanks

[randbrown]

@xlegs did you find a way to print these? I’m having the same problem. I’m trying various @media print {} styles but can’t figure out how to get scrolling content to be included.

[xlegs]

I found a solution but it’s a bit hacky. Essentially, this call allows one to print a static page, so I created a function that builds one on a button click.

this.platform.ready().then(() => {
  	 	Printer.isAvailable().then(
  	 		res => Printer.print(printStyles+printContents,'My App'),
  	 		err => alert("Printer not available")
  	 	);
  	 });

I wrapped my list in <ion-card id="printable">. Then I manually copy and pasted the global CSS and injected it.

printList() {
  	 var printContents = document.getElementById('printable').innerHTML;
  	 var printStyles = `<style>input, button, ion-card-header, .hideOnPrint, ion-item-options, ion-button-effect {
		display: none !important;
	}

	[item-left], [item-right], scroll-content, ion-badge, ion-item {
		margin: 0;
	}

	body {
		position: relative;
		overflow: visible;
	}

	scroll-content {
		margin-top: 0rem !important;
		width: auto;
		height: auto;
		overflow: scroll;
		display: inline;
	}

	ion-card {
		margin: 0;
		border: 0;
		box-shadow: none;
		width: 100%;
		overflow: visible;
		display: inline;
	}

	ion-list {
		display: flex;
		flex-wrap: wrap;
	}

	ion-item-sliding {
		display: flex;
		flex: 1 0 50%;
		width: 40%;
	}

	*, .toolbar-title {
		font-size: 1rem !important;
		line-height: 1rem !important;
		overflow: visible;
	}

	ion-navbar, .toolbar{
		padding: 0;
		margin: 0;
		min-height: 2rem;
		background: none;
	}

	[padding] {
		padding: 0 !important;
	}

	.item {
		min-height: 2rem;
	}

	div.wrapper {
		width: 100%;
		display: block;
		clear: none;
	}

	input.cell {
		margin: 0 0.5rem;
	}

	[item-left], [item-right] {
		margin: 0;
	}

	ion-badge {
		font-weight: bold;
		clear: none;
	}

	div.wrapper.cell {
		display: inline-block;
		clear: none;
		width: auto;
	}	

	.badge-wrapper {
		display: inline-block;
		margin-left: 1em ;
	}
	}

	</style>`;

  	 this.platform.ready().then(() => {
  	 	Printer.isAvailable().then(
  	 		res => Printer.print(printStyles+printContents,'My App'),
  	 		err => alert("Printer not available")
  	 	);
  	 });
}

Hope that helps!

[randbrown]

@xlegs Thanks for the reply. Nice work! I eventually came up with a media query that works for my scenario. In my case it came down to the body, ion-nav, and .scroll-content. Link to my findings here, in case it helps anyone:

CSS media query for printing scrollable content

To answer my own question… I’ve been banging on it for a while and finally have something that works (at least for my scenario). Any further suggestions/advice is still greatly appreciated. The relevant lines to get all scrolling content instead of chopping it off at first page: @media print { body { position: static; overflow: initial; } ion-nav { overflow: initial !important; } .scroll-content { position: relative; overflow:visible!important; } } Here is my entire print media…

[Corin]

I can’t get to print my page in desktop browser.

I have exactly the same issue as you.

Any help, please?