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

Question

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

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

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

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

在下面正确放置的位置： 在此处其下方的位置不正确，它应与基础网格的单元（显示“ Rental”的单元）重叠。

css位置是否有问题，这是否导致我的ag-Grid在基础网格中？更重要的是，如何控制cellEditor的位置，以便我的输入字段始终与所编辑的基础单元格重叠？

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

获得

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;"....>

Updated stackblitz

Answer 2

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

问题中提到的堆栈闪电和来源已得到更正，以正确使用样式。