CODEWITHSUNDEEP
javascripthtmlcssangularangular-cdk-virtual-scroll
Kugesh Rajasekaran
Kugesh Rajasekaran

Reputation: 316

Height and width in Percentage is not working for cdk-virtual-scroll-viewport

I have a cdk-virtual-scroll-viewport in my application where height and width are provided in percentage.

  <div class="wrapper">
   <cdk-virtual-scroll-viewport itemSize="5" class="table-viewport">
   ...

  .wrapper {
    height: 100%;
    width: 100%;
  }

  cdk-virtual-scroll-viewport {
  height: 80%;
  width: 80%;
  border: 1px solid #e6e8f0;
  border-radius: 0.5%;
  /* box-shadow: 1px 100px black; */
  }

But it's not working. There is nothing visible on the screen. It works when we give the height and width in px.

cdk-virtual-scroll-viewport {
  height: 800px;
  width: 1300px;
  border: 1px solid #e6e8f0;
  border-radius: 0.5%;
  /* box-shadow: 1px 100px black; */
  }

Could anyone figure out what's happening?

Upvotes: 0

Views: 677

Answers (1)

Rahul Savaliya
Rahul Savaliya

Reputation: 138

The overscroll-behavior css property sets what a browser does when reaching the boundary of a scrolling area. It's a shorthand for overscroll-behavior-x and overscroll-behavior-y.

overscroll-behavior: auto;

Upvotes: 1

Related Questions