Skip Navigation

[Resolved] A view using AJAX looks great on page 1, but successive pages break CSS styling.

This thread is resolved. Here is a description of the problem and solution.

Problem: I have a View that uses a Content Template designed with Fusion Builder. On page 1, the results look correct, but on all other pages the spacing is incorrect. This View uses AJAX pagination.

Solution: Check the styles applied to each module in the Fusion builder. Remove any margin or padding styles applied directly to the column, container, row, etc. and apply them using a CSS class instead.

This support ticket is created 5 years, 3 months ago. There's a good chance that you are reading advice that it now obsolete.

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
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 4 replies, has 2 voices.

Last updated by kevinJ-2 5 years, 3 months ago.

Assisted by: Christian Cox.

Author
Posts
#1199468

I am trying to: display CPT items 4 across, 8 per page, with AJAX manual pagination.

Link to a page where the issue can be seen: hidden link

I expected to see: consistent styling as successive pages load via AJAX.

Instead, I got: broken styling so that column content spills outside the margins.

#1199528
Screen Shot 2019-02-12 at 5.04.54 PM.png
Screen Shot 2019-02-12 at 5.05.06 PM.png

Hi, it looks like you're using the Fusion Builder to design this loop template, am I correct? Try turning off AJAX pagination to see if the problem is resolved. If so, then the fastest solution is to use CSS to add padding instead of using the spacing options in the Fusion builder's design tabs. There are some limitations to Views AJAX pagination with 3rd-party plugins and builders, and most of those limitations occur when these row- or module- or column-based design styles aren't applied correctly. In this case, the padding settings seem to be the main issue. They're applied on the first page, but not later pages. See the screenshots here for an example using a Column block. I would add a CSS class to the block where the padding designs are applied in Fusion Builder. Then in your theme's CSS or in Appearance > Customize > Additional CSS, add some CSS rules to help override those padding settings. I can help a bit if you get stuck on the CSS overrides, let me know.

#1199550

Thanks, that's helpful, but while I made the change, it's still breaking upon changing pages (just not quite as bad). I added the class "homesite-archive-column" to the Fusion builder column, and then this CSS:

.homesite-archive-column { padding: 10px; }

After it breaks, I can inspect the code and achieve the correct appearance if I apply padding of "10px 40px" but obviously that's a problem since it's not like I can add it after the ajax action, and it's also crazy that the columns would exceed their containers (by 15px on each side). I'm truly mystified.

#1199552

Aha! It was at the container level, which had 2 different sets of defaults. I thought it was set on the 0px padding default, but for full-width it's "0 30px." I overrode that, then added CSS and it's working now. Thank you for the insight on the CSS/AJAX issue. That gave me the tools I needed to correct the problem!

#1199553

Thanks again!

This ticket is now closed. If you're a Toolset client and need related help, please open a new support ticket.