Colorpicker - automatic positioning

[a4DEVP]

The color picker should open upward when there's not enough space at the bottom and vice-versa.
Is this possible?
The [cpPosition] - auto doesn't work and I am using the latest version of the plugin.
Any help will be appreciated.

[DebuggerAK]

Try to use cpUseRootViewContainer = true. Is it a mobile view problem?

[sujeetjaiswara]

Same issue here

[tmtron]

on small (e.g. mobile) screens it would even be better to open it as a modal dialog over the input field (i.e. to hide it) - otherwise we easily get into a situation where the OK button is off screen

e.g. in the current demo, when we switch to mobile mode and click an input near the bottom, it will open the color picker to the right-botom:

here's my workaround, at the end of the setDialogPosition function:

          /**
           * we want to make sure, that the bottom/right is always visible: i.e. to access the OK button
           */
          const dialogBounds = this.dialogElement.nativeElement.getBoundingClientRect();
          const bottom =  this.top + dialogBounds.height;
          if (bottom > window.innerHeight) {
            this.top = window.innerHeight - dialogBounds.height;
          }
          const right =  this.left + dialogBounds.width;
          if (right > window.innerWidth) {
            this.left = window.innerWidth - dialogBounds.width;
          }

[tmtron]

Fix #329 works for me, but only the first time that I open the dialog.
Unfortunately I cannot reproduce this in the example app. I guess that i is related to change detection (onPush) or the fact, that we show the picker in a dialog?

When debugging I can see that this code:

ngx-color-picker/projects/lib/src/lib/color-picker.component.ts

Line 1048 in 557140f

const dialogBounds = this.dialogElement.nativeElement.getBoundingClientRect();

returns only 0 (for top, etc.).

I think that the reason for this is that the dialog is not visible yet.
I patched this code:

ngx-color-picker/projects/lib/src/lib/color-picker.component.ts

Lines 843 to 847 in 557140f

	this.hidden = false;
	this.setDialogPosition();
	this.cdRef.detectChanges();

to also call this.cdRef.detectChanges(); before this.setDialogPosition();.
Then the issue is fixed for me.