Skip Navigation

[Waiting for user feedback] Page Shift on Pagination Chenge using Ajax on Legacy Grid

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 1 reply, has 1 voice.

Last updated by Minesh 1 day, 6 hours ago.

Assisted by: Minesh.

Author
Posts
#2835630

Using Legacy Views I have a complex nested loop. Loop 1 queries Locations custom post types with filters and displays a map with marker for each queried, filtered location. Nested outside the loop a 2nd loop queries related Posts and produces a legacy bootstrap grid (12-column variety) that produces a 4-column grid on desktop, 2-column on mobile. 4 items per page with pagination using Ajax on any field change. Here's the architecture on the page. Each loop has identical filters so that the markes and grid change with as the filter change. The grid View includes the pagination navigation arrows immediately below the grid. Cell contents are generated in a Content Template. The first loop filters are displayed first on page. (The second loop filters are hidden but the grid responds the changes to the first loops filter on the same page.) Next on this page is the Grid. The non this page further down is the Map. This architectures acually produces the desired results very nicely. HOWEVER ..... with this pay layout when the top of the grid on either desktop or mobile lies slightly above the viewport the pagination change shifts the page downward to below the grid. It does not occur when the upper border of the grid lied fully within the viewport. This rarely happens on desktop because it is rare to click the arrow with the grid that high on the screen but if you do this result occurs. But it easily happens on mobile because the stacked four cells (2x2 plus the navigation arrows below) occupy about 95% of the typical mobile viewport. It's not unusual to click the arrows while a small portion of the top two cells are slighly above the top border of the viewport. This causes a shift downward that totally shift the grid above the viewport.
Here is the page. I'm no expert on CSS. Certainly no expert on bootstrap as this is the only place I use it. And know othing about Ajax. So I need help. >>> hidden link
Let me know if you want to see the Queries section or the Output Loop of both loops. Thanks.

#2835719

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Can you please share a vidoe that shows where exactly the issue lies and filtering with what filters. It will help me to understand the issue and once I review that I will be able to guide you in the right direction.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I have set the next reply to private which means only you and I have access to it.