[Closed] The view doesn't appear the first time

[Author]

Posts

[Deniz]

Hi,

I reopen this thread https://toolset.com/forums/topic/the-view-doesnt-appear-the-first-time-2

This code fixed the problem but I just saw that it generates an overflow and stretch the items.
you can see it : hidden link

Thanks

[Jamal]

Hello and thank you for contacting the Toolset support.

Waqar won't be available until Monday. If you would like me to help with this issue, I'll need more details to understand your request. You said:
This code fixed the problem but I just saw that it generates an overflow and stretch the items.

Can you elaborate more on this?
- Can you add a screenshot that shows this overflow?
- Can you add a screenshot that shows how the items are stretched?

[Deniz]

Hi,

sorry you can find the original ticket here :
https://toolset.com/forums/topic/the-view-doesnt-appear-the-first-time/
and after
https://toolset.com/forums/topic/the-view-doesnt-appear-the-first-time-2/

This code works but expand the view
.js-wpv-view-layout {
width: 100% !important;
}

In attachment I try to catch the issue.
Thanks

Regards

[Waqar]

Hi,

Thank you for sharing the screenshot and I'll be following up on this ticket.

I can see that the result item's container stretches for a moment when the results are being updated through the AJAX. It seems to have something to do with the "fade" transition effect, but to troubleshoot this in-depth, I'll need to see how this view is set up in the admin area.

Can you please share temporary admin login details in reply to this message?

Note: Your next reply will be private and please make a complete backup copy, before sharing the access details.

regards,
Waqar

[Waqar]

Hi Fabien,

Thank you for sharing the admin access.

To fix the overflowing flicker, you can replace the existing custom CSS code, from:

body:not(.home) .js-wpv-view-layout {
	width: 100% !important;
}

To:

#testimonial-view-3 > .js-wpv-view-layout {
	width: 100% !important; 
}

regards,
Waqar

[Deniz]

Hi Waquar,

thanks It's seems to work well.
Can you see why the way the arrows work is weird on this page.

Thanks
Regards
Fabien

[Waqar]

Thanks for the update and glad that it works.

I couldn't notice any weird behavior from the navigational arrows in the slider.

Can you please share some more details, ideally some screenshot or a screen capture video?

[Deniz]

Hi,

after the load of the page, click direct on a narrow nothing happens.

Thanks
Regards
Fabien

[Deniz]

Hi,

after the load of the page, click immediately on a arrow and nothing happens.

Thanks
Regards
Fabien

[Waqar]

I've performed some tests on a couple of different browsers, but I couldn't experience the issue.

The only time the slider's navigation arrows don't work is if I try to use them, while the page is still being loaded. This is expected as it is a long page with a number of dynamic scripts and the slider's script also needs some time to initialize, once the page's loading has completed.

If you'll visit the pages as a regular visitor and would try to naturally navigate through the slides, you'll not have any difficulty.

For an even smoother loading experience, you can lower the number of preloaded pages and the transition time between the slides.
( screenshot: hidden link )

If you still notice something out-of-place, you're welcome to share a screencast of what you see.

[Deniz]

Hi,

you can see the issue in this screencast hidden link

I also see a new issue with the shortcode of the responsive view which breaks the current view and display the other tabs under this shortcode (see it in desktop)
hidden link
(It doesn't matter for the broken css you can see after removing the shortcode)

thanks
Regards
Fabien

[Waqar]

Thank you for sharing these screencasts.

I can see the issue with unresponsive slider arrows 1 time out of 5 attempts and they become responsive once the slider starts automatically scrolling. It seems it has something to do with the fact that the view is inside the tabbed content that is not visible when the page loads.

I'll recommend making sure that WordPress, active theme and all plugins are updated to the latest versions and then checking the view with all extra plugins disabled. You can also test with a default theme like Twenty Twenty-One. This will help in narrowing down to a possible conflict with the third-party code.

In case the issue still persists, you're welcome to share a clone/snapshot of the website so that I can troubleshoot this on a different server.
( ref: https://toolset.com/faq/provide-supporters-copy-site/ )

Note: I've set your next reply as private.

As for the other issue with the view for smaller screens, I noticed that it was set to show 1 item per page, but the content in the Loop Editor was the same as for the desktop view, which shows 2 items per page.

I've updated that code slightly which has fixed that issue:

[wpv-layout-start]
  [wpv-items-found]
    <div class="slider-container prochain-depart">
      <!-- wpv-loop-start -->
      <wpv-loop wrap="1" pad="false">
        <div class="row">
          <div class="col-xs-12 col-sm-6">[wpv-post-body view_template="element-de-boucle-dans-listing-voyage-de-noce-mobile"]</div>
        </div>
      </wpv-loop>
      <!-- wpv-loop-end -->

      [wpv-pagination]
        [wpv-pager-prev-page class="testomonial-slider-prev"][/wpv-pager-prev-page]
        [wpv-pager-next-page class="testomonial-slider-next"][/wpv-pager-next-page]
      [/wpv-pagination]

    </div>
  [/wpv-items-found]
  [wpv-no-items-found][wpml-string context="wpv-views"]Pas de résultats[/wpml-string][/wpv-no-items-found]
[wpv-layout-end]