You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MudTimeline设置max-height属性后连接线被截断问题求助

解决MudTimeline滚动时连接线截断问题
  • 问题原因:直接给<MudTimeline>添加max-height:320px; overflow-y: scroll;样式时,组件内部的连接线是基于自身容器高度布局的,滚动后超出可视区域的部分无法正确渲染连接线,仅保留节点圆点。

  • 修复方案:

    1. 移除<MudTimeline>上的滚动样式
    2. 给<MudTimeline>套一个外层容器,将滚动样式应用到这个外层容器上

示例代码:

<div style="max-height:320px; overflow-y: scroll;">
    <MudTimeline>
        <MudTimelineItem>示例内容1</MudTimelineItem>
        <MudTimelineItem>示例内容2</MudTimelineItem>
        <!-- 更多Timeline项 -->
    </MudTimeline>
</div>
  • 原理:外层容器负责提供滚动区域,MudTimeline可以保持完整的高度,内部的连接线能基于整个组件的高度正常渲染,滚动时整个Timeline内容随容器滚动,不会出现连接线截断的情况。

内容的提问来源于stack exchange,提问作者Lisa

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.08 17:52:03