AEM编辑模式下Admin用户Drag component here显示异常问题排查

针对你遇到的AEM编辑模式下「Drag component here」区域仅显示小点、调整高度后恢复正常的问题，以下是几个常见原因：

• 容器组件CSS样式异常：
  最可能的情况是该拖拽容器的默认高度被设置为0px、1px这类极小值，或者因padding/margin被重置、overflow:hidden导致高度塌陷；如果用了Flex布局，没有设置align-items: stretch或容器本身没有足够空间撑开高度，也会出现这种情况。AEM默认的拖拽区域类（如cq-dd-container）的样式可能被自定义CSS覆盖了。

• 编辑模式初始化脚本未正常执行：
  AEM编辑模式下，负责渲染拖拽区域的ClientLib脚本（比如cq.authoring.dialog相关）可能因加载延迟、依赖缺失或报错，没有给拖拽容器设置正确的初始尺寸。检查浏览器控制台是否有JS报错，确认相关ClientLib是否正确引入到页面模板中。

• 响应式布局规则冲突：
  如果页面用了响应式媒体查询，可能在编辑模式的视口尺寸下，触发了把容器高度设为极小值的规则。比如某些移动端样式规则误应用到了编辑模式的桌面视口中。

• 组件/模板配置错误：
  该容器组件的设计对话框（Design Dialog）中，可能被错误设置了高度参数（比如设为0）；或者模板继承时，父模板的布局配置覆盖了当前容器的正常尺寸设置。

• 缓存导致的样式加载异常：
  浏览器缓存或AEM的ClientLib缓存可能保留了旧的错误样式，清理浏览器缓存或通过AEM的/libs/granite/ui/content/dumplibs.rebuild.html重建ClientLib后，可能恢复正常显示。

• 自定义代码或第三方组件冲突：
  自定义的组件代码、引入的第三方UI库（如Bootstrap）可能用了全局CSS选择器（比如div、.container），意外覆盖了AEM拖拽区域的默认样式，导致高度被压缩。

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