Handlebar partial 无法在 Materialize 卡片中显示问题求解

Materialize 框架的.card类默认配置了overflow: hidden属性，你用到的下拉菜单弹出层属于绝对定位元素，超出卡片容器边界的部分会被默认裁切隐藏，所以放在卡片外不受限制可以正常展示，放在卡片内就无法正常显示。

• 方案1：修改卡片容器的溢出属性
  给承载下拉菜单的卡片添加自定义样式覆盖默认配置：

.card-with-dropdown {
  overflow: visible !important;
}

将上述自定义类添加到你的卡片元素class属性中即可。注意如果你的卡片内部有其他需要裁切溢出内容的交互逻辑，该方案可能会产生副作用，建议只给用到下拉菜单的卡片单独添加该类。

• 方案2：修改下拉菜单的挂载容器
  在初始化Materialize下拉组件时，指定将下拉弹出层挂载到body节点下，脱离卡片容器的溢出限制，初始化代码示例：

document.addEventListener('DOMContentLoaded', function() {
  const dropdownTriggers = document.querySelectorAll('.dropdown-trigger');
  M.Dropdown.init(dropdownTriggers, {
    container: document.body
  });
});

如果你的Handlebar partial是动态插入到卡片中的，需要保证partial渲染完成、下拉菜单的DOM节点已经存在于页面中之后，再执行上述初始化代码，避免组件未绑定失效。

打开浏览器开发者工具的元素面板，先确认Handlebar partial渲染后下拉菜单的DOM节点确实存在于卡片内部，排除partial渲染失败的问题，再查看下拉弹出层的样式属性，确认是否是被父容器裁切导致的展示异常。

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