CSS setting to modify an element at scrolling down

Question

I am using an Angular package below;

In my settings, I have overflow:scrol in my css so that when I add many entries I can scroll down to see until the last entry.

However, I realized that while scrolling works, the time line (the line in the middle) does not extend to the end. I tried to specify height: auto, height: 100% and min-height: 100%. None of which worked.

Is there any way to extend this line as I scroll down?

Any help will be highly appreciated!

Care to share your code? Something similar to the example you linked to would be helpful. — JDunken
– JDunken, Commented Oct 9, 2019 at 13:14
@JDunken Thank you for your reply. I updated the post with my code. — rks
– rks, Commented Oct 9, 2019 at 15:11
@Koji i replaced the StackBlitz code with yours and it works, please check again, replace the 'mgl-timeline' component with yours. — phainix
– phainix, Commented Oct 10, 2019 at 13:48
@phainix Appreciate your reply. Would you be able to try adding several entries to the time line? Then I think you will know what I meant here. I also uploaded a photo at the bottom of my post for the ease of understanding. Sorry for my poor explanation.. — rks
– rks, Commented Oct 10, 2019 at 15:24
@Koji, i replaced your code and took a screenshot, please see screenshot — phainix
– phainix, Commented Oct 11, 2019 at 10:10

phainix · Accepted Answer · 2019-10-11 15:16:18Z

1

The mgl-timeline component appends a div to represent the timeline-line line (The grey line). From your code you are defining a maximum height to the mgl-timeline component max-height: 70vh;. The implication is that the timeline-line line will also have a maximum height of 70vh.

If you remove this property then the issue disappears, if it is compulsory that you have the maximum height set, you would have to use a different implementation style wise.

Disable the default timeline-line
Attach a pseudo element to each mgl-timeline-entry, this means that each timeline entry will have the grey line attached to it, so the entries array can grow as long as possible.

Please see below:

.mgl-timeline-line { // Hide the default timeline
    display: none;
}

.mgl-timeline-entry-card-header:before { // Pseudo element is attached to the card which creates the time-line line for each entry
    width: 10px;
    background-color: #a0a0a0;
    height: 300%;
    content: "";
    position: absolute;
    left: calc((100% - 10px) / 2);
    left: -10px;
    top: -100%;
}

answered Oct 11, 2019 at 15:16

phainix

1792 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rks Over a year ago

Thank you very much for your solution. It seems to work except for one case. It only works when the time line has a header on the left side. Please see the uploaded image I attached to the post above. I tried to use different classes than ".mgl-timeline-entry-card-header:before". I cannot really get this to work though..

rks Over a year ago

Please look at this link for the pic: i.sstatic.net/Jrdno.png

Collectives™ on Stack Overflow

CSS setting to modify an element at scrolling down

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related