元素不想绝对定位，ag-Grid 中的自定义单元格编辑器答案

【问题标题】：Element does not want to be positioned absolutely, custom cell editor in ag-Grid元素不想绝对定位，ag-Grid 中的自定义单元格编辑器
【发布时间】：2019-08-08 10:28:12
【问题描述】：

我编写了一个自定义的 ag-Grid cellEditor，该 cellEditor 设置为弹出窗口，并有一个输入字段，用作其下方选择框的搜索/过滤输入。

我遇到的问题是绝对位置似乎适用于弹出窗口的垂直位置，但不适用于水平位置。如果弹出窗口对于底层网格来说太宽，它会将我的输入字段推到不同的位置（通常是左侧）。

我有一个 stackblitz 示例，其中最左侧的列（城市）在编辑时具有正确定位的输入字段，但最右侧的列（住宿）具有位于左侧的输入字段。

https://stackblitz.com/edit/ag-grid-auto-complete

它的下方位置正确：在下面它的位置不正确，它应该与底层网格的单元格重叠（显示“出租”的单元格）。

我的 css 定位有问题吗，这是否导致我的 ag-Grid 在底层网格中？更重要的是，如何控制 cellEditor 的位置，使我的输入字段始终与正在编辑的底层单元格重叠？

来源也可在https://github.com/superman-lopez/ag-grid-auto-complete获得

【问题讨论】：

标签： html css ag-grid

【解决方案1】：

一旦你从AutocompleteComponent 中删除它的宽度，它就会得到解决。

之前

 <ag-grid-angular style="width: 350px; max-height: 200px; font-weight: 200;"....>

之后

 <ag-grid-angular style="max-height: 200px; font-weight: 200;"....>

Updated stackblitz

【讨论】：

感谢您的帮助。在我的示例中，让宽度超出配置确实使其成为该列的一个不太明显的问题。但不能解决问题。如果您将city 列拖到最右侧，您将看到问题仍然存在。

【解决方案2】：

我错误地使用<div> 将样式应用于组件本身，而我应该在host（实际上是组件）上使用样式。有关样式封装和host 样式的更多信息可以在许多资源中找到，例如https://blog.angular-university.io/angular-host-context/

问题中提到的 stackblitz 和来源已更正以正确使用样式。

【讨论】：