pagination inside scrolleable div makes browser window scrolleable

[AndesCode]

Hi.

Im experimenting a rare bug when i use the ngx-pagination inside a scrolleable div

I've reproduced the same error that i have in my code in the example stackblitz of this project writing the following code in the .html (replace the stackblitz app.component.html content for the next one )

<div style="height: 40vh; overflow: auto;"> <!--scrolleable div-->
<div style="height: 140vh;">bunch of content</div> <!--div simulating bunch of elements-->
<div class="text-center">
	<h1>ngx-pagination live demo</h1>
	<h4><small><a href="https://github.com/michaelbromley/ngx-pagination">GitHub Repo</a></small></h4>
	<p>A bare-bones demo for your experimenting / bug-reproducing pleasure.</p>
</div>
<div class="list">
		<ul>
			<li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }">{{ item }}</li>
		</ul>

		<pagination-controls (pageChange)="p = $event"></pagination-controls>
</div>
</div>

It only happen when the scrolleable div have a ngx-paginator AND the scrolleable div have a important number of items inside that in this case is simulating by "bunch of content" (if you reduce bunch of content div vh the error dissapear but in my code i have a lot of stuff to show right there)

As you can see, this make the main browser window scrolleable for some reason.

This is by far the best paginator of angular and I hope this could have a solution :(

Thanks!

[michaelbromley]

Hi,

thanks for the report and the reproduction. It's really weird, I can't figure out why it does that. A solution you can use is to create your own pagination controls template as demonstrated here: https://michaelbromley.github.io/ngx-pagination/#/custom-template

This seems to fix the issue for me.

[AndesCode]

I will try your solution as soon as I can, thanks for your answer!!