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

Question

I have written a custom ag-Grid cellEditor, the cellEditor is setup as a popup and has an input field that acts as search/filter input for selection box below it.

The issue I have is the absolute position seems to work for the vertical position of the popup, but not the horizontal position. If the popup is too wide for the underlying grid, it will push my input field to a different position (typically to the left).

I have a stackblitz example where the most left column (city) has a correctly positioned input field when editing, but the most right column (accommodation) has an input field that is positioned to the left.

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

Below it is correctly positioned: Here below it is incorrectly positioned, it should overlap the cell of the underlying grid (the cell showing "Rental").

Is there something wrong in my css positioning, is this caused my ag-Grid in the underlying grid? More importantly, how can I control the positioning of the cellEditor so that my input field always overlaps with the underlying cell that is edited?

Source also available at https://github.com/superman-lopez/ag-grid-auto-complete

Answer 1

I incorrectly used a <div> to apply styling to the component itself, while I should have used styling on the host (which is effectively the component). More information about style encapsulation and host styling can be found at many resources such as https://blog.angular-university.io/angular-host-context/

The stackblitz and the source mentioned in the question has been corrected to correctly use the styling.

Answer 2

It gets resolved once you remove its width from AutocompleteComponent.

Before

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

After

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

Updated stackblitz