Search code examples
c#htmlcssblazormudblazor

MudTimeLine with a max-height property cuts off the joining line

I have a MudTimeline which I wanted to be scrollable so I applied the style ="max-height:320px; overflow-y: scroll;". I noticed that the line that goes between each of the MudTimelineItem's is cut off after the 320px so that the dots are now hovering there without a line in-between them.

I reproduced my problem here: https://try.mudblazor.com/snippet/QEQRlabwGBlBdtkg

Solution

  • You can easily go around this by applying the style to a container above it, instead of the component itself. This way, the component does not consider its size to be limited.

    <div style="max-height: 320px; overflow-y: scroll;">
    <MudTimeline TimelineAlign="TimelineAlign.Start">
         ...
    </MudTimeline>
</div>