Canvas Support

Canvas Slider Migration

5 replies · opened Jun 6, 2021

BbdunnanJun 6, 2021

I am struggling to get the video slider at the top of the v6.x page (the Live URL below) to work as expected.

This is the v5.x version of the same page/slider as a reference:
https://servo-lift.com/solutions/high-containment

I’ve tried to very carefully match the demo shown here: (slider-canvas-video-event.html)
I've also read the Migration docs

How can I obtain the responsive behavior in the existing version.
Right now, if you resize the screen to mobile and back it disappears and doesn't reappear without a page refresh.

Thanks in advance for your help.

SSemicolon WebSTAFFJun 7, 2021

Hello,,

We have checked out the Codes on your Page and the issue is definitely related to incorrect codes during Customization. Additionally, there are some HTML Validation errors as well on your Page: https://validator.w3.org/nu/?doc=https%3A%2F%2Fservolift.prod01.oregon.platform-os.com%2Fsolutions%2Fhigh-containment . Consider fixing these first.

Additionally, some of the CSS File Linkings have been commented out in the HTML File (see attached). So this might be causing the issue as well. Make sure that you are properly migrating the codes and compare your Codes with the Default Files from the Package to avoid any unnecessary issues.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BbdunnanJun 7, 2021

The validation errors are fixed and css links removed. (irrelevant but done.)
This page is being worked on actively as I do the conversion from v5 to v6. (Some other things may still be messed up. Please ignore them.)

Now, what I want help with is the slider and, more specifically, why the swiper-wrapper is not expanding properly to fill the swiper-container despite applying the height to the #slider.

It is coded exactly like your examples but does not behave the same.
I would also like to know how to override the elimination of the slider at mobile size.

SSemicolon WebSTAFFJun 7, 2021

Hello,

Sorry, it is not irrelevant. If there are unclosed HTML Tags or Duplicate IDs, then the HTML Codes might not render properly in some browsers. Additionally, the CSS Linkings should not be removed. As we have mentioned earlier, make sure that you are comparing the Codes. See the two attached Images and check how the codes look on your Website and the Default Files. Some of the CSS Linkings are missing in your Version.

First, make sure that the Codes and other dependencies like CSS/JS Files are linked properly and in their Default Order and if it still does not work, then we will definitely provide further assistance. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

BbdunnanJun 17, 2021

I have two remaining components on this page with issues at device-md (i.e., 768px - 991px) Best viewed using responsive design mode in DevTools.

1.) The slider (slide-inner) disappears at this size (device-md) although the overall slider size is correct.

2.) I am using a mega-menu for the Products menu. (Please note: Because of the CMS I am using, I can't accommodate breaking the menu structure into UL/columns, so I am using CSS column-count to wrap columns.) Everything works great except two nagging issues:

a.) It does not function properly at device-md sizes. Something (a JS?) is placing a "display:none;" on .sub-menu-container.mega-menu-column. When that is removed, it functions as expected, and just as it does at smaller sizes. Can you help me solve this?

b.) Lastly, as noted above, I created a slightly different twist on the mega-menu layout to accommodate my CMS. I am running into some weirdness when hovering over the last few sub-menus in the 4th column. (e.g. Valves) It's resizing the container to accommodate the sub-menu. Can that be made to adjust its positioning when the sub-menu runs out of space on the right? Using ".on-click" makes it usable but I was wondering if had a way to get it to get this to behave so we can use the preferred "hover" mode?

Thanks again,
-- Bruce

SSemicolon WebSTAFFJun 17, 2021

  1. Some CSS related to the .slider-inner is still missing or rather customized (see attached).

  2. We Apologize for the Inconveniences, however, we currently do not provide Customization/Integrations related Support according to the Item Support Policy: https://themeforest.net/page/item_support_policy . You will need to manually fix this or Hire a Freelancer to help you out. Support is currently provided only for the Features included with Canvas by default.

Let us know if we can help you with anything else.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard