When embedding botui in iframe, autoscrolling to the bottom doesn't work. about botui HOT 9 OPEN

i ran into the same issue and i found a workaround.

if you want to prevent botui from auto scrolling to the bottom, you just have to remove the scrollIntoView function :

root.Vue.directive('botui-scroll', {
  inserted: function (el) {
    _container.scrollTop = _container.scrollHeight;
      el.scrollIntoView(true);
  }
});

But if you want a nice, smooth and centered scroll, just call scrollIntoView() with these parameters :

root.Vue.directive('botui-scroll', {
  inserted: function (el) {
    _container.scrollTop = _container.scrollHeight;
      el.scrollIntoView({behavior: "smooth", block: "center", inline: "nearest"});
  }
});

from botui.

My fix:

root.Vue.directive('botui-scroll', {
      inserted: function (el) {
        _container.scrollTop = _container.scrollHeight;
        el.scrollTo(0, el.scrollHeight);
      }
});

from botui.

Did you find any workaround/solution?

from botui.

from botui.

Let me know if this doesn't work! I can try finding my older code.

Kevin it didn't work.

from botui.

I have the same issue. Any update on a workaround ?

from botui.

I found the solution

you have to replace

<button type="button" :class="button.cssClass" class="botui-actions-buttons-button"

with

<button type="button" :class="button.cssClass" class="botui-actions-buttons-button" v-botui-scroll

and line 214 with

root.Vue.directive('botui-scroll', {
  inserted: function (el) {
    el.scrollIntoView(true);
  }
});

from botui.

Is there any option for not auto scrolling to the bottom?
My client requires that only scroll when there is any question buttons for user.

from botui.

I found out a little bug related to this thread and the el.scrollIntoView(true), but I'm not sure if without it would be ok.

If you have some stuff below the botui component in the page the scroll into view makes the active field appear on top of the page, losing all the other intermediate messages

Example (with bootstrap - try on a very little screen)

<div class="row">
  <div class="col">
    <bot-ui />
  </div>
</div>
<div class="row" style="height: 400px">
  <div class="col">
    <h1>Something else</h1>
  </div>
</div>

The bot schema could be:

• welcome message
• buttons
• other message
• text field

When you click on the button the page scrolls up to the text field, and the user must scroll up to see the second message.

Thank you for your work, much appreciated!

from botui.