CODEWITHSUNDEEP
cssangularangular-cdkangular-cdk-virtual-scroll
V_R
V_R

Reputation: 96

position:fixed doesn't work inside cdk-virtual-scroll-viewport

HTML element with position:fixed doesn't work inside cdk-virtual-scroll-viewport. Below style should put the element at the page top left corner, but this class doesn't apply to elements inside cdk-virtual-scroll-viewport.

.fixed-div {position: fixed;top: 0;left: 0;}

for some reason above class to elements inside cdk-virtual-scroll-viewport will keep the elements at the top left corner of cdk-virtual-scroll-viewport.

link to reproduce https://stackblitz.com/edit/angular-mvf6dp

How to force elements with position:fixed inside cdk-virtual-scroll-viewport to display the relative to viewport ?

Upvotes: 1

Views: 1518

Answers (1)

Ayehavgunne
Ayehavgunne

Reputation: 21

This is because of the css transform property on the div.cdk-virtual-scroll-content-wrapper element. The transform property makes and child that is position fixed treat that parent as the containing block rather than the body of the page.

See here for details https://developer.mozilla.org/en-US/docs/Web/CSS/position

Still trying to figure out how to deal with this myself.

Upvotes: 1

Related Questions