Apply style on scrollable element

Issue

I have data which i am displaying by columns with ngFor. When I add styles to column div, they are only applayd on ‘visible’ part of whole column, I can’t see them when I scroll to the bottom. There must be height limit and sticky haders. I made stackblitz to show my problem.
https://stackblitz.com/edit/angular-bcsqc8

Solution

stackblitz

The overflow-y CSS property specifies whether to clip content, render a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.

.main-container {
    width: 100%;
    height: 100px;
    flex-direction: row;
    position: relative;
    overflow-y: scroll;
}

I found answer about sticky issue here.

if your element isn’t sticking as expected the first thing to check are the rules applied to the container.

Specifically, look for any overflow property set on the parent. You can’t use: overflow: hidden, overflow: scroll or overflow: auto on the parent of a position: sticky element.

So after removing overflow: auto; in the container, the sticky worked well

.container {
  display: flex;
}

Answered By – Alan Yu

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published