'Auto' position calculation does not function reliably

[MelanieW97]

Edit: Problem still exists in version 15 for opened expansion panels! Look at my comment #338 (comment).

Hello,

I've got a problem that the 'auto' calculation is not always working. (Position 'top' is working perfectly fine, though.)
However, that only seems to happen if other material components are on the same page, such as mat-expansion-panel or mat-table in my case.

I have already tried using 'cpUseRootViewContainer' and 'cpDialogDisplay'='popover'. 'cpDialogDisplay'='popover' does not change anything (the color-picker does not close on click outside anymore, that's the only thing that changes) - even if used along with 'cpUseRootViewContainer'. 'cpUseRootViewContainer', however, has the effect that the color-picker is waaaay closer to the field it belongs to, but it still isn't the right position.

I am using Angular Material 15 (Upgrade to 16 does not change anything). As I have not used your package before, I have no clue if the issue has always been there or not.

Here you can see what it looks like ('cpUseRootViewContainer' is being used):

• With mat-table (color-picker is inside table)

• With mat-expansion-panel (Color-picker is not being inside panel => color-picker is below expansion-panel)

[MelanieW97]

I have just found out that 'auto' is working perfectly fine in ngx-color-picker@13. There seems to be a bug in the latest version 14.

[MelanieW97]

After upgrade to version 15, the problem got a little smaller. Unfortunately, there's still an issue with an opened expansion panel.

Have a look at the one below the opened expansion panel:

Therefore, it's still not working reliably for me in all cases. I have to stay with version 13 until it has been fixed.

It definitely has something to do with the expansion panel. It's working now if the panel is closed (which hasn't been working in v14 either).

Panel closed:

[sconix]

Would be nice to get simple reproduction for this, but will try to have a look if can find the cause for this.

[MelanieW97]

Here's a quick and dirty sample project. It shows the buggy behavior with expansion panels.
Open each panel or both at the same time and look what happens. I hope that's something you can work with. :)

https://angular-exvavr.stackblitz.io

https://stackblitz.com/edit/angular-exvavr?file=src%2Fapp%2Fapp.component.html

And as I said, it's working perfectly in version 13. That might help you, too.
If it's being displayed normally for you, try by making the browser window smaller. Then it's being displayed completely wrong.

[itimie]

Hi just following up if a fix is coming for this