Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

feat: use infinite-scroll with grid or any custom container

See original GitHub issue

Feature Request

Ionic version:

[x] 5.x

Describe the Feature Request

Currently, i’m working on a client’s project where i need to use infinite-scroll but i’m unable to do so. I have a page where i got upper section 30% filled with filter controls (like search, sort etc) and remaining 70% page contains the grid. I cannot let my page scroll as i need full view, therefore i need infinite-scroll with grid, but it seems to work only with page.

It would be great to have this thing done.

Describe Preferred Solution

Describe Alternatives

Related Code

Additional Context

Issue Analytics

State:
Created 3 years ago
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

Rehan1579commented, Apr 7, 2020

Yes, i worked the way you said and it solves the problem for now.

But shouldn’t ion-infinite-scroll needs to be flexible enough, so that i don’t need to put everything outside the ion-content except for my infinite-scroll ?

I mean, ion-content suppose to contain everything except for ion-header and ion-footer and that’s how its in DOC, Isn’t it ?

1reaction

liamdebeasicommented, Apr 7, 2020

Thanks for the follow up. The infinite scroll component looks to use the dimensions of ion-content, so you would likely need to move your card outside of ion-content in order to “block” 300px of the height. From there, you can remove the <div style="height: calc(100% - 220px); overflow: auto;"> element.

Can you give that a try and let me know if it works?