Multiple ion-refresher in the same page

I created a page that divides its content into 2 panes using the grid layout. Each column is actually an ion-content containing a list, and I like them to have an ion-refresher. But it doesn’t work properly, as the refresher is not centered to the ion-content. Maybe I’m not using the grid layout properly?

See this code pen:

Wrong css class on your columns. Change col50 to col-50 on both your ion-content and it works fine. :slight_smile:

Thank you for you answer, and my apologizes. In an attempt to simplify the code snippet, I made this typo and actually over simplified the code.
Here is another version:

It feature a side list, and then 2 lists in the main content area. Both lists have a pull to refresh and an infinite scroll component. But they seem to actually work only on the right list. Moreover, the infinite scroll on the right list triggers the one on the left list. The code is logging to the browser console when the events are triggered.

I hope that this snippet shows it better now. Anyway, thanks for your attention!

1 Like