Telerik Gantt在Bootstrap标签页首次加载宽度显示异常

这是隐藏容器内初始化Kendo组件的典型问题：

• Bootstrap未激活的标签页面板默认带display: none样式，Gantt初始化时所在容器处于隐藏状态，无法读取到正确的父容器宽度，因此首次渲染尺寸错乱
• 手动调整浏览器窗口时，Kendo UI会自动触发全局组件重绘，重新计算容器尺寸，因此显示会自动恢复正常
  另外你贴的代码里存在一处DOM属性笔误，会加剧DOM解析异常：schedule标签对应的面板写的是<div role=tabpanel"，role属性值缺少前引号，需要修正为<div role="tabpanel"。

选择以下任意一种方式即可解决：

• 方案1：监听标签页显示完成事件，触发Gantt重绘
  将以下脚本添加到页面脚本块中，不要在DOM首次加载完成的ready事件里提前执行resize逻辑：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  const targetPane = $(e.target).attr('href');
  if (targetPane === '#schedule') {
    const ganttInstance = $('#gantt').data('kendoGantt');
    ganttInstance?.resize();
  }
})

• 方案2：调整Gantt初始化时机
  如果不想绑定标签页事件，也可以把Gantt的初始化逻辑从页面直接渲染，改成第一次切换到Schedule标签时再初始化，初始化时容器已经处于显示状态，就能拿到正确宽度完成渲染。

避坑提示：不要在页面首次加载完成事件里直接调用gantt.resize()，此时Schedule标签还处于隐藏状态，调用重绘依然拿不到正确宽度，必须等标签页完全显示的shown.bs.tab事件触发后再执行重绘逻辑。

内容的提问来源于stack exchange，提问作者Eli