shepherd in webview does not show buttons

[valexus1]

hello,

i'm trying to use shepherd in a webview, everithing is ok on desktop and in web version

but inside the android app and emulator the box show only the text info while the next buttons does not appears ...

only the buttons in the shepherd footer, but the code im sure is ok.

its a simple webview and of course all js are active.

i forgot something?

thanks a lot!!

V.

[RobbieTheWagner]

@valexus1 what version of Shepherd and are you including the CSS?

[valexus1]

5.0.1 but i've tried also 6.0.1 and of course i have css enable, on desktop and chrome mobile everything is ok, the problem is in the webview, seems like for some reason the buttons there aren't.

i really don't understand where is the problem

can i put some button with custom class in the text and put on click event ? i've tried

jQuery(document).on( "click", ".tippy-popper button.test", function() { console.log('click'); tour.next(); });

but tour.next(); seems not work

[RobbieTheWagner]

@valexus1 I have no idea without seeing some sort or reproduction. My only thought is you are not correctly including the CSS.

[valexus1]

  <link href="https://www.mysite.com/welcome.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2.2.10/webcomponents-bundle.js"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=Object.assign%2CSymbol%2CElement.prototype.matches"></script>
<script src="https://cdn.jsdelivr.net/npm/shepherd.js@5.0.1/dist/js/shepherd.min.js"></script>
<script>

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    scrollTo: false,
	 classes: 'shepherd-theme-custom'
  }
});
 jQuery(document).on( "click", ".tippy-popper button.shepperd-buttn", function() { console.log('click'); tour.next();  });

tour.addStep({
  title: 'test',
  text: 'hi, welcome to vulevoo. <br/><br/> ',
  attachTo: {
    element: '.wish-item  .wish-avtr img',
    on: 'bottom'
  },
  buttons: [
    {
      action() {
        return this.back();
      },
      classes: 'shepherd-button-secondary',
      text: 'Back'
    },
    {
      action() {
        return this.next();
      },
      text: 'Next'
    }
  ],
  id: 'creating'
});
tour.addStep({
  id: 'example-step2',
  text: 'blabla.',
   scrollTo: false,
  attachTo: { 
    element: '.item0 .copy', 
    on: 'top'
  },
  classes: 'example-step-extra-class2',
  buttons: [
    {
      text: 'Next',
      action: tour.next
    }
  ]
});
tour.addStep({
  id: 'example-step3',
  text: 'blablabla step 3 ',
  attachTo: { 
    element: '.item0 .clpp.donate ', 
    on: 'top'
  },
  classes: 'example-step-extra-class3',
  buttons: [
    {
      text: 'Next',
      action: tour.next
    }
  ]
});
tour.addStep({
  id: 'example-step4',
  text: 'blablabla step4.',
  attachTo: { 
    element: '.item0 .clpp.shopping ', 
    on: 'top'
  },
  classes: 'example-step-extra-class4',
  buttons: [
    {
      text: 'Next',
      action: tour.next
    }
  ]
});
tour.start();

```

[RobbieTheWagner]

@valexus1 Shepherd 5.0.1 is no longer supported, please try the latest 6.x release.

[valexus1]

with

<script src="https://cdn.jsdelivr.net/npm/shepherd.js@6.0.2/dist/js/shepherd.min.js"></script>

the result is the same,

ok in dekstop and mobile, in webview text is ok but no buttons.

i've seen the log in android studio trying to find some problem but there is nothing relevant.

[RobbieTheWagner]

@valexus1 yes, you cannot simply change the version, you must include the CSS.

[valexus1]

however,

thanks a lot for your support,

maybe i can try a workaround...

is there a method to just click in some place and go to next step? or click for example to the all window and go to next. without buttons. m?

[valexus1]

ok

jQuery(document).on( "click", ".tippy-popper .bntcustom", function() { tour.next(); });

seems to work.

i'll put some custom button in the text.

the problem in the webview is a real mistery.

thank you.

V.

[RobbieTheWagner]

@valexus1 try Shepherd 6.x and please also include the CSS file, then things should work as intended.