Element不想绝对定位，ag-Grid中自定义cell editor

Question

我写了一个自定义的 ag-Grid cellEditor，cellEditor 被设置为一个弹出窗口，并且有一个输入字段作为其下方选择框的 search/filter 输入。

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

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

下面是正确的定位：它在下面的位置不正确，它应该与底层网格的单元格重叠（显示 "Rental" 的单元格）。

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

Answer 1

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

之前

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

之后

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

Answer 2

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

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

Element does not want to be positioned absolutely, custom cell editor in ag-Grid