visible horizontal overflow

[Stoffel-KT]

Hello,

First of all thank you for this awesome package!

Unfortunately I ran into a problem and can't seem to find a sollution.

I have a sidebar with a vertical virtual scroll. Whenever I hover over an item in this scroll container, a popover show up, giving more information about the item (for example in the container a name is ellipsed because the container is not wide enough and when a user hover over the item a popover is shown with the full name). When I use virtual scroller the popover causes a horizontal scrollbar to appear and the popover is clipped by the virtual-scroller.

When I try this in a normal scroll container this doesn't happen.

Further investigation showed me this has to do with the relative positioning of the virtual scroller, but I'm not able to find a sollution...

Do you know of a way to overcome this issue?

<virtual-scroller #scroll [items]="items">
  <div *ngFor="let item of scroll.viewPortItems">
    <div class="reference" appHoverPopper [target]="tooltip">
      {{ item.name }}
    </div>

    <div class="popper" #tooltip>
      <span class="popper__arrow"></span>
      Hi, my name is {{item.name}}! I think I'm so amazing, don't you?
    </div>
  </div>
</virtual-scroller>

<div class="scroll-container">
  <div *ngFor="let item of items">
    <div class="reference" appHoverPopper [target]="tooltip">
      {{ item.name }}
    </div>
    <div class="popper" #tooltip>
      <span class="popper__arrow"></span>
      Hi, my name is {{item.name}}! I think I'm so amazing, don't you?
    </div>
  </div>
</div>

virtual-scroller {
    height: 200px;
    width: 300px;
}

.scroll-container {
    margin-top: 200px;
    height: 200px;
    width: 300px;
    overflow-y: auto;
}

.reference,
.popper {
    display: inline-block;
}
.popper {
    position: absolute;
    ...
  }

with virtual-scroller

with normal scroll container (desired result)

[SergeyPie]

You should set useMarginInsteadOfTranslate to true, <virtual-scroller #scroll [items]="items" [useMarginInsteadOfTranslate]="true"> it helps me