MudTimeline设置max-height属性后连接线被截断问题求助
解决MudTimeline滚动时连接线截断问题
问题原因:直接给
<MudTimeline>添加max-height:320px; overflow-y: scroll;样式时,组件内部的连接线是基于自身容器高度布局的,滚动后超出可视区域的部分无法正确渲染连接线,仅保留节点圆点。修复方案:
- 移除
<MudTimeline>上的滚动样式 - 给
<MudTimeline>套一个外层容器,将滚动样式应用到这个外层容器上
- 移除
示例代码:
<div style="max-height:320px; overflow-y: scroll;"> <MudTimeline> <MudTimelineItem>示例内容1</MudTimelineItem> <MudTimelineItem>示例内容2</MudTimelineItem> <!-- 更多Timeline项 --> </MudTimeline> </div>
- 原理:外层容器负责提供滚动区域,MudTimeline可以保持完整的高度,内部的连接线能基于整个组件的高度正常渲染,滚动时整个Timeline内容随容器滚动,不会出现连接线截断的情况。
内容的提问来源于stack exchange,提问作者Lisa
相关产品推荐
相关产品推荐

