Skip Navigation

[Resolved] layout with view with flexslider distorted

This support ticket is created 5 years, 6 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
- - 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00 14:00 – 20:00
- - - - - - -

Supporter timezone: Asia/Ho_Chi_Minh (GMT+07:00)

This topic contains 18 replies, has 2 voices.

Last updated by Beda 5 years, 6 months ago.

Assisted by: Beda.

Author
Posts
#1242405

Hey,

I'm using a layout for unsigned users, showing a view with a slider in it.
I am using flexslider, done so many times before like this:

[wpv-layout-start]
	[wpv-items-found]
      <div class="flexslider slider">
          <ul class="slides">
	<!-- wpv-loop-start -->
	<wpv-loop>
      <li>
		[wpv-post-body view_template="loop-item-in-registration-slider"]
      </li>
	</wpv-loop>
	<!-- wpv-loop-end -->
</ul>
</div>
	[/wpv-items-found]
	[wpv-no-items-found]
		<strong>[wpml-string context="wpv-views"]No items found[/wpml-string]</strong>
	[/wpv-no-items-found]
[wpv-layout-end]

the problem is, the slide takes up all the classes of the layout into it. every

  • has inside it a div with "container-fluid ddl-remove-bs-padding" classes, then inside this another div with "ddl-full-width-row row" classes, and more:

    hidden link

    but when i put the view in a page, without a layout, it works fine:

    hidden link

    any ideas?

    thx!!

  • #1242501

    I see on both links the exact same output, being dot pagination without images.
    Is this intended?

    I also use Flexslider thru Layouts on some private pages and they work.
    Could it be that some HTML tag isn't closed properly in the Views Editor?
    That might then conflict with Layouts - look for red highlighted code or generally, unclosed (or overclosing) HTML tags like </div> and <div> etc.

    If there is nothing of this nature in the editors, try to remove the call to the "wpv-post-body view_template" and instead put the code you use directly in the Loop - this often resolved similar problems.

    Finally, you can try confirming this is also happening on a new View, with the functioning HTML in it (rarely Views get corrupt, leading to similar causes)

    If all this does not change the situation, please can you provide me with a Duplicate of this site so I can take a closer look?

    #1242502

    Sorry, try now and see the difference.
    It was the same when I changed toolset settings for layouts to use CSS and js for all pages.
    Check in Mobile, it's intended for it.

    #1242509

    Update - checked with other views as well. Once I check in setting for layout "Load custom CSS added using Layouts: all pages" - the view outside the layout is corrupted as well. if it's checked to "Only on pages using layouts" - it's corrupt only in layouts.

    #1242511
    Bildschirmfoto 2019-05-11 um 16.03.20.png
    Bildschirmfoto 2019-05-11 um 16.03.29.png

    I see the same on both pages.
    The HTML as far I saw has no such ddl Classes nested in the lists.

    Can you share a Screenshot with the broken and working aspect, and where you see the additional HTML?
    Did you try the suggested solutions, which might resolve the problem?

    If this issue is happening only on or specifically on mobile, I can test on an iPhone, however, there the images are also missing and I see the same layout on both pages.

    Currently, I can not deduce much more but what I outlined here.
    https://toolset.com/forums/topic/layout-with-view-with-flexslider-distorted/#post-1242501

    #1242520

    I did not see your previous reply as we crossed us while submitting our each reply.

    In the case you mention enabling/disabling Toolset Layouts, then you have some CSS in the Layouts > CSS editor, that affects this.

    I suggest removing the code there, and re-introducing it one by one until you have the culprit line of CSS that messes the layout.

    #1242521
    test.jpg

    but it looks fine outside the layout... i passed the code through css lint and there's no problem there.
    try to hard reload the test page, it looks fine on my end (attached screen).
    the problem is definitely something to do with the way layout and flexslider work together.

    #1242527
    Bildschirmfoto 2019-05-11 um 16.20.26.png

    Well, I do not see those slides on my end.
    Neither on hidden link nor on hidden link.
    I see only the grey area as in the screenshots, on both screens the same.

    If you disable Toolset Layouts CSS site-wide (Load custom CSS added using Layouts: all pages), and then the issue also happens on Views which are not in Layouts, then clearly the Toolset Layouts CSS is the culprit of the issue, it's causing the conflict, because if disabled, hence CSS loaded only in Layouts styled pages, then only the Views within a Layout are broken.
    Those will be fixed as well as soon you remove the CSS completely from the editor and re-save.
    You can temporarily store the CSS in a local or another editor to not lose it.

    I suggest to follow with the above steps, along with the other suggestions marked here:
    https://toolset.com/forums/topic/layout-with-view-with-flexslider-distorted/#post-1242501

    #1242533

    I did - and it didn't work.
    Try to see the test page now - It was not accessible for not logged in users.
    I have tried to put the css in the view loop - didn't work. i tried to take it out of the and place it in the layouts css - didn't work.

    #1242536

    Yes, I see the slide on the working version now, however, I can still not see any ddl HTML added to the other, breaking page.

    You mention that deleting the CSS from the Layouts CSS editor did not solve the issue, but disabling it does for Views outside Layouts, which then points to the only other possible option (which I cannot replicate) that Layouts even if no CSS is added, somehow adds HTML tags to the source (which I cannot see on the breaking page)

    We can see what i can find with the last Suggested step from https://toolset.com/forums/topic/layout-with-view-with-flexslider-distorted/#post-1242501, hence I'd need a Duplicate, where I can see the issue and replicate it, so to narrow down the cause by exclusion process.

    This will then help me to see the issue, I hope and allow to solve it.
    Please if possible add few simple steps to reach the issue, or Screenshots of where you see the broken code, so I can narrow this down quickly.

    #1242542

    I can't create a duplicator package, server keeps crashing.
    Bit you can login with my credentials, it's a site under construction anyway.
    <removed> disabled fusion slider in avada.i think
    Thx!!

    #1242550

    This is a public forum, that is why when sharing passwords or duplicates, we activate private replies, or, you can choose to activate such when opening the ticket
    Please do not provide access details if you do not see the private form, so we can re-open it.

    I removed the access details from the above answer but I'd suggest setting up fresh ones and submitting them to me in the next, private answer.

    Now, as for the issue, after logging in with the provided details I saw hidden link is almost empty (only a date and 2 entries with a gravatar), while hidden link shows a working slider.
    This is because of the Layout that styles hidden link is not featuring any slider, it's hence fully expected the slider won't' show there.

    Since you set Layouts to use the CSS only on pages where Layouts is assigned, and display successfully the View on the page without Layouts, it means the CSS in Layouts is not needed to make the View work since you already have added the CSS to that View.
    You can hence delete it from Layouts since it's not required for the View to work.
    Or, you can delete it from Views and load with Layouts, but not both.

    That should solve the issue.

    #1242552

    Dear Beda,
    Please bare with me - and try to understand:
    Home page is now showing those dates because I disabled the access restriction of pages for not logged in users, just so you can see the test page with the correct slider.
    I've assumed this restriction now, so you can check the site both as logged user (and see the home page) or as unlogged user (and see the layout with the slider - which isn't working).
    There is currently NO CSS OR JS in layouts. NONE. It's only inside the view loop.
    And still there is a problem.
    Please - inspect it. It's an issue with layouts and flexslider.
    thank you.

    #1242557
    Bildschirmfoto 2019-05-11 um 19.16.24.png

    There is a lot of CSS in the Layouts CSS editor, as I also checked when I logged in previously and just before again (were the screenshot is from).

    I understand now that you load the slider on the homepage only if a user is not logged in, thru a Layout "Not logged in users", set as Access error.
    In that Layout, the View "Registration Slider" displays the slider.

    That View has the same CSS as is saved in the Layouts CSS editor.
    This will conflict, likely, and you should save the CSS on one central place only.
    Either in the View or in Layouts CSS, but not in both.

    Once that is done, and the issue still persists, we might need to have a copy, as mentioned, but since Duplicator would crash the site as you mention, we could work with a copy of the Database and FTP files, zipped up and shared to a Google Drive or DropBox folder, as example.

    I can then grab it from there and see what is wrong locally.
    I use flexslider successfully on other sites, as mentioned, and was not able to replicate such issue even when loading the CSS thru Layouts.

    Hence inspecting this issue is only possible locally on a copy of the site where it's replicated, so to see what I miss.

    Thanks!

    #1242562

    still persists.
    how can we solve the duplicator issue? is there another way? you have credentials, you may try any other way you fit right to copy this locally.
    thanks!!
    ido