useModalOverlay not working after few steps

[porespod]

There are few addStep I used, however, after step four, the overlay doesn't create an opening around my remaining target element (next step till the end).

Does anyone know how to solve this problem? Please help :(
Thank you in advance!

[RobbieTheWagner]

@porespod it sounds like you might be targeting the wrong element. Try targeting the parent of the element you want to target. I'm guessing the elements you are trying to target do not have a width and height and getBoundingClientRect is not able to get their dimensions.

[porespod]

@porespod it sounds like you might be targeting the wrong element. Try targeting the parent of the element you want to target. I'm guessing the elements you are trying to target do not have a width and height and getBoundingClientRect is not able to get their dimensions.

But it works well in Microsoft Edge, the previous one using Chrome.

Anyway, can I change the distance for the popup? As you can see the popup is too near the target element.

[RobbieTheWagner]

@porespod yes, please use popperOptions to set offsets and modifiers.

If something is broken in Chrome, please provide a reproduction, and we can take a look, but it is likely as I mentioned, that you need to target a different element or wrap in a div with the dimensions you want, etc.

[porespod]

Am I doing it the right way? Can you please help me show the correct way @rwwagner90 .
Sorry, I'm still learning :/

[RobbieTheWagner]

@porespod I'm not sure what you have going on there. popperOptions is an option you pass to Shepherd. You should not be importing and using Popper directly. I am also not sure if it supports the syntax you are using or not. Are you following the Popper docs on offset?

[porespod]

Yes, following based on the Popper docs on offset. I don't know how to apply it :/

[RobbieTheWagner]

@porespod use popperOptions for Shepherd for the popper options please. It is all documented in the Shepherd docs https://shepherdjs.dev/docs/Step.html.

[porespod]

Hey, thank you for your help! I managed to change the offset already :)

[porespod]

Hey, I still have problem with the overlay :/
No idea what's the problem because the overlay works fine in Microsoft Edge.

create.zip

@porespod yes, please use popperOptions to set offsets and modifiers.

If something is broken in Chrome, please provide a reproduction, and we can take a look, but it is likely as I mentioned, that you need to target a different element or wrap in a div with the dimensions you want, etc.

[RobbieTheWagner]

@porespod can you please create a minimal reproduction using something like codepen etc and also tell us what your problem is you are seeing?

[porespod]

https://codepen.io/porespod/pen/bGVVVGq

After few element, it doesn't fully highlight it.
As I said, everything works well in Microsoft Edge but not in other browsers :/

[RobbieTheWagner]

@porespod check the console, The element for this Shepherd step was not found #upload. The element you are attaching to has to exist.

[RobbieTheWagner]

Also, your codepen does not run. You cannot use <script> tags inside the JS file. It has to be JS.

[RobbieTheWagner]

Also, do not include popper manually please. You should follow the Shepherd docs. Use https://cdn.jsdelivr.net/npm/shepherd.js@7.1.1/dist/js/shepherd.js and https://cdn.jsdelivr.net/npm/shepherd.js@7.1.1/dist/css/shepherd.css in your global codepen settings to add them and then make sure the codepen functions without console errors. I suspect you have the same issue in your code, where the element does not exist.

[porespod]

@porespod check the console, The element for this Shepherd step was not found #upload. The element you are attaching to has to exist.

how do i resolve this problem? if doesn't exist the element supposedly not highlighted, but #upload is the first highlighted element.

[porespod]

Also, do not include popper manually please. You should follow the Shepherd docs. Use https://cdn.jsdelivr.net/npm/shepherd.js@7.1.1/dist/js/shepherd.js and https://cdn.jsdelivr.net/npm/shepherd.js@7.1.1/dist/css/shepherd.css in your global codepen settings to add them and then make sure the codepen functions without console errors. I suspect you have the same issue in your code, where the element does not exist.

This is how i wrote it in my code editor.

[RobbieTheWagner]

how do i resolve this problem? if doesn't exist the element supposedly not highlighted, but #upload is the first highlighted element.

You have to make sure the element exists before trying to use it as a target. You'll want to use something that ensures the page is done rendering, then setup the tour. The timing of this is up to you, not up to Shepherd.

This is how i wrote it in my code editor.

Yes, but it is wrong. First, I have said a few times now, please stop including popper. Remove the popper line please, please! Also, you are required to add the shepherd CSS as well. JavaScript files do not have script tags, Script tags go in HTML files.

[porespod]

Hey mate, sorry about that. I've removed the poppers line and script tags in JavaScript files and added Shepherd CSS as well. However, the problem still occurs even tho the element exists. Try look at the demo.

I see that the problem occurs after scrolling half of the page. I try to target the wrapper, and it only covers half of the page.

[RobbieTheWagner]

@porespod please create a minimal reproduction. There are far too many other scripts and styles in this codepen. I suspect some of that is interfering somehow. If you are able to reproduce this in a codepen that only includes Shepherd, I would be very surprised.

[porespod]

Here, I have removed scripts and styles that don't affect the view.

[RobbieTheWagner]

@porespod if you remove this:

    <!-- Main stylesheets (template main css file) -->
    <link href="https://www.allsomedock.com/media/design/admin/css/main.css" rel="stylesheet" />

It fixes things. Something in there is conflicting with Shepherd.

[porespod]

Oh yesss! Do you know what might be the things in the CSS that clash with speherd?
Maybe the body or wrapper? Display or position?

[RobbieTheWagner]

@porespod any of those could be the culprit. I recommend removing a few styles at a time, until you find the issue. Since this is not a Shepherd bug, I am closing this. Good luck!

[gromen]

@rwwagner90 Hi, I have similar issue with not highlighting element after few steps #895 (comment) :

This element should be highlighted:

• onboardingWizard-components has width and height properties

Code:

$(function () {
 if (!document.querySelector('#payment-form')) {
  return;
 }

const navbar = document.querySelector('.onboardingWizard-nav');
const navbarItems = [...navbar.querySelectorAll('.onboardingWizard-nav-item')];

const steps = [
    {
      text: 'TEST will be the default in the plugin. You only need to do the configuration once to have TEST 
      stepClass: 'right-bottom',
      classActive: 'api-settings',
      attachToElement: '.onboardingWizard-environment',
      btnBackText:'Go back',
      btnNextText: 'Next <i class="icon angle right"></i>',
      btnNextClass: 'with-triangle',
      btnCollapseClass: 'btn-collapse',
    },
    {
      text: 'Fill in your correct details and click "TEST API Key"\n' +
        '\n' +
        'Learn about the difference between: Orders API or the Payments API',
      stepClass: 'step-5 right-bottom',
      classActive: 'api-settings',
      btnBackText:'Go back',
      btnNextText: 'Next <i class="icon angle right"></i>',
      btnNextClass: 'with-triangle',
      attachToElement: '[for="sylius_payment_method_gatewayConfig_config_api_key_test"] + *',
      btnCollapseClass: 'btn-collapse',
    },
    {
      text: 'Enabling components, allows you to add the fields needed for credit card holderr own\n' +
        'checkout. If you select NO, users will be redirected to the Mollie\n' +
        'checkout page',
      stepClass: 'right-bottom',
      classActive: 'store-settings',
      btnBackText:'Go back',
      btnNextText: 'Next <i class="icon angle right"></i>',
      btnNextClass: 'with-triangle',
      attachToElement: '.onboardingWizard-components',
      btnCollapseClass: 'btn-collapse',
    },
];

  function navbarVisibilityHandler() {
    navbar.classList.toggle('d-none', !tour.isActive());
    navbar.setAttribute('aria-hidden', tour.isActive());
  }

  const tour = new Shepherd.Tour({
    useModalOverlay: true,
    confirmCancel: false,
    defaultStepOptions: {
      class: 'onboardingWizard-popup',
      arrow: false,
      cancelIcon: {
        enabled: true,
      },
      scrollTo: { behavior: 'smooth', block: 'center' },
      modalOverlayOpeningRadius: 4,
    },
  });

  ['inactive', 'show'].forEach(event => tour.on(event, navbarVisibilityHandler));

  steps.forEach((step, index) => {
    tour.addStep({
      id: step.id,
      title: step.title ? step.title : null,
      text: step.text,
      classes: step.stepClass,
      attachTo: {
        ...(step.attachToElement && { element: step.attachToElement }),
        on: 'top-start'
      },
      ...(step.classActive && { highlightClass: step.classActive }),
      buttons: [
        {
          text: step.btnBackText,
          action() {
            if (index === 0) {
              tour.complete();
            } else {
              tour.back();
            }
          },
          secondary: true,
          ...(step.btnBackClass && { classes: step.btnBackClass }),
        },
        {
          text: step.btnNextText,
          action() {
            if(index === steps.length - 2) {
              tour.complete();
            } else {
              tour.next();
            }
          },
          ...(step.btnNextClass && { classes: step.btnNextClass }),
        },
      ],
    });
  });

 tour.start();
})

highlighting on element  .onboardingWizard-environment working properly:

[RobbieTheWagner]

@gromen it seems like you are using an older version of Shepherd and/or need to update your usage. What version are you on?

[gromen]

@rwwagner90 thank you for your response - I'm on v8.2.3 - I'm using  https://cdn.jsdelivr.net/npm/shepherd.js@8.2.3/dist/js/shepherd.min.js for test purposes

[RobbieTheWagner]

@gromen you likely need to update your code then. It seems like your implementation is from many versions ago.

[gromen]

@rwwagner90 ahhh...yes, thank you - updated to v8.3.0, but still not highlighting...

I am using production, minified version of shepherd from dist location, attached via <script>

[gromen]

@rwwagner90  this solved my problem 😃  🎊  #1340 (comment)

I have attached smenatic-ui library and .pushable element's height was the problem