BootstrapTour scroll not working as expected in modal

Question

Ok, so I am integrating Bootstrap Tour with a project that uses. Basically, everything works fine until I show a modal and then try to attach a step to it. Bootstrap tour in modal auto scroll not working. refernce link. https://github.com/sorich87/bootstrap-tour/issues/350

Answer 1

You can use bootstrap tour's container. When you use it, the scroll problem will be solved. You can give the id of modal to the container property.

Example:

var tour = new Tour({
  container: '#insertCustomerModal'
  steps: [
  {
    element: "#my-element",
    title: "Title of my step",
    content: "Content of my step"
  },
  {
    element: "#my-other-element",
    title: "Title of my step",
    content: "Content of my step"
  }
]});

Answer 2

nice results with this:

var _bootstraptour=null;

function start_tour(){
_bootstraptour = new Tour({
    container:$("#div_scrollable")
    ...
    ,template: "<div id=... style='...position: relative;'>"
    ...

when steps are adding:

step.element=$('#element');
step.onPrev= function () {
    var step_prev=_bootstraptour.getStep(step.index-1);
    tour_scrollTo_step(step_prev);
}
step.onNext= function () {
    var step_next=_bootstraptour.getStep(step.index+1);
    tour_scrollTo_step(step_next);
}
...



function tour_scrollTo_step(step){
    var parent=$("#div_scrollable");
    var scrollTop=parent.scrollTop() + ($(step.element).position().top - parent.position().top) - (parent.height()/2)+parent.position().top
    parent.scrollTop(scrollTop);  
}

hope it will helping!