[Resolved] .wpv_slide_remove height 2157px which pushes my footer down on ajax pagination

[Author]

Posts

[lindsayH]

I made the manual transition and AJAX Transition effect: with duration 50000 miliseconds so I slowed down the transition and had time to examine the CSS. I found a div with a class of .wpv_slide_remove.

I have 'solved' this by overriding the CSS, but I was just wondering where or how the 2157px was calculated and whether making the height: auto is a good idea?

element.style {
    width: 1100px;
    height: 2157px;
    overflow: hidden;
}

.wpv_slide_remove {
    height: auto !important;
}

[Nigel]

Hi Lindsay

Am I to understand that the issue is that when you add a slider using Views that during the transition between slides your footer moves up and down (and the details you provide are how you were debugging the issue?).

When I add a slider View to a page, I can't see any such problem with the footer moving, even when I slow everything down to see more closely what's happening.

If you *are* seeing the footer move as the slider transitions and that is the root problem I may need to take a copy of your site because I can't reproduce it on a vanilla install.

My first step would be to try switching theme and disabling other plugins to see if the problem persists, so you may want to check that yourself. If needs be, I'll set up a private reply to get site credentials from you.

[lindsayH]

Hi Nigel, it's actually the AJAX pagination in a view, I will try switching themes and disabling plugins on my staging site and get back to you.

[Nigel]

Hi Lindsay

I didn't get time to follow up on this today, I'll have another look in the morning now that I understand what you are describing a little better.

I don't think you need to worry about testing on a minimal install just yet. I'll report back when I have tested again on a local site, and if needs be I can set up a private reply for you to get a copy of your site for further testing.

[Nigel]

Hi Lindsay

I still can't see the problem on a local vanilla test site, there's no issue with the footer moving up and down with the transition—unless the height of the list of results changes.

I think I need to see it on your site, and possibly take a copy for testing.

I will mark your next reply as private so that I can get log-in credentials from you—you may want to create a temporary admin user for me to use that you can later delete. And be sure to have a current backup of your site, even though I don't intend to make any changes other than to temporarily add a backup plugin to take a snapshot of the site.

Can you confirm which View I should look at on what page?

[Nigel]

Hi Lindsay

I looked at your site and see the problem.

During the pagination with the fade effect, Views calculates the height of the View wrapper div, injects a wrapper div with class .wpv_slide_remove that has the same height, and moves the current page of results inside that wrapper, where it also inserts the new page of results, using JavaScript to manage the fade between the two.

You have customised the View in question a lot in terms of the styling, which affects the calculations of the heights required.

You'll see that I duplicated your View (called Wedding Suppliers List simple) and inserted this on a new page (Wedding Suppliers simple). I stripped out most of your customisations so that it displays more-or-less as per default, and you'll see that it now works as expected.

I'd suggest you beware of the effect of floats and apply clearfixes to the container divs of your filter section etc. as a starting point to fixing it. Re-introducing your customisations step-by-step should help you pinpoint the problems.

[lindsayH]

Many thanks - I can see that it's OK on the Wedding Suppliers simple page. I have done some tidying and will look at some more as soon as I can.

My CSS fix works well in the meantime.

.wpv_slide_remove {
    height: auto !important;
}