1

I have a cdk-virtual-scroll-viewport element and inside this element I have a relatively positioned div with an absolute positioned element inside it.. basically I want to be able to show the absolutely positioned item outside the cdk-virtual-scroll-viewport but its being cut off...

here is a stackblitz of the issue

https://stackblitz.com/edit/angular-kavjsh

component.html

<div class="container">
  <cdk-virtual-scroll-viewport itemSize="70">
    <div class="test" *cdkVirtualFor="let name of names">
      <p>{{name}}</p>
      <div class="test-item"></div>
    </div>
  </cdk-virtual-scroll-viewport>
</div>

component.css

p {
  font-family: Lato;
}

cdk-virtual-scroll-viewport {
  width: 150px;
  border: 1px solid black;
  height: 600px;
}

.test {
  position: relative;
}

.test-item {
  position: absolute;
  background: black;
  width: 150px;
  height: 100px;
  left: 50%;
}

whats happening is this

enter image description here

and my desired result is this

enter image description here

I've tried all sorts of positioning configuration and I can not make it work?

Any help would be appreciated!

Smokey Dawson
  • 8,827
  • 19
  • 77
  • 152
  • I have exactly the same issue (showing a dropdown on an element of the list), and I don't want / can't reset the `contain: content;` property, as it is also important in the rendering of the elements (proper ellipsis on a long text). I tried creating the floating part outside of the list, but it brings other issues (specific to our app). Smokey, did you solve this issue at the time? – PhiLho May 22 '20 at 13:21
  • Did you find the solution, if yes then please post it. – Santosh S Oct 19 '20 at 07:39
  • @SantoshSonarikar no never found a solution – Smokey Dawson Oct 19 '20 at 08:17

2 Answers2

2

You can use the below steps

  • reset contain to 'initial' or 'layout'
  • change overflow to 'visible' 

cdk-virtual-scroll-viewport {
   overflow: visible;
    contain: initial;
  
}

:host() ::ng-deep cdk-virtual-scroll-viewport .cdk-virtual-scroll-content-wrapper {
   contain: inherit;
}

https://stackblitz.com/edit/angular-miqwyw?file=src/app/app.component.css

Chunbin Li
  • 2,196
  • 1
  • 17
  • 31
0

Try with overflow visible in the test div or the cdk-virtual-scroll-viewport


cdk-virtual-scroll-viewport {
  width: 150px;
  border: 1px solid black;
  height: 600px;
  overflow:visible
}

.test {
  position: relative;
  overflow:visible
}
Hitech Hitesh
  • 1,641
  • 1
  • 9
  • 18