Printing items in a scrollable list - items are cut off

Ionic Framework ionic-v3
1

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

2

@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.

3

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!

4

@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:

5

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

I have exactly the same issue as you.

Any help, please?