Position fixed?

[yannicke]

I don't know why, but when i scroll my ngx-color-picker is fixed:

Is it normal? I would like a relative position (it's the case in the demo when you scroll the component is not fixed...).

Thank you for your help!

[jeffyzxc]

Have you resolve this issue ? also encountered this one i tried changing the position css but no luck

[yannicke]

@jeffyzxc I'm not able to resolve this issue, still waiting for help! (I tried lot of things but it didn't work)

[vsevolodKuznietsov]

@yannicke I resolved it with help of restyling it with to position: absolute(with important) and set top/left properties which I need. for now I see only one way

[yannicke]

@vsevolodKuznietsov Thanks, your solutions works. Unfortunately my color picker is wrapped in a perfect-scrollbar container with overflow:hidden. The position:fixed property allow the picker to be visible outside the container :(

[sconix]

There is the use root view container option which can be used to place the dialog to the root container hence not effected by the parent. Its bit tricky to use, but should do the trick.

[nq0w72G]

i set cpUseRootViewContainer to true,but color picker still has a fixed positon,how toresolve it ?

[manuelatexier]

As a workaround, we found this solution: 1) Programmatically adjust the color picker’s position to ensure it fits within the viewport on colorPickerOpen 2) Listen to the wheel event to re calculate position

<div class="field-group">
  <label class="field-label">
    {{ label | translate }}
  </label>
  <div class="field-input-color-group">
    <input type="text" class="field-input-color"  #colorPickerInput 
    [(colorPicker)]="color" [value]="color"
    (colorPickerChange)="onColorPickerChange()"
    (colorPickerOpen)="onColorPickerOpen()"
    />
    <span class="field-input-color-preview" [style.background]="color" (click)="onClickFieldInputColorPreview()"></span>
  </div>
</div>

export class FormColorpickerComponent {

  // Paramètres
  @Input() color: string;
  @Input() label: string;
  @Output() colorChange: EventEmitter<string> = new EventEmitter<string>();

  @ViewChild('colorPickerInput', { static: true }) colorPickerInput: ElementRef;

  /**
   * Ajuster la position du colorPicker par rapport à son input
   */
  adjustColorPickerPosition(): void {
    const inputRect = this.colorPickerInput.nativeElement.getBoundingClientRect();
    const picker = document.querySelector('.color-picker') as HTMLElement;
    picker.style.position = 'fixed';
    picker.style.top = `${inputRect.bottom - inputRect.height}px`;
    picker.style.left = `${inputRect.left - picker.clientWidth - 14}px`;
  }

  /**
   * Permet d'ajuster la position du color picker
   * Permet de corriger un bug d'affichage du colorpicker dans un contexte où l'overflow du container est hidden ou scroll.
   */
  onColorPickerOpen() {
    this.adjustColorPickerPosition();
  }

  /**
   * Evènement de modification de l'input induit émission de la nouvelle valeur
   */
  onColorPickerChange() {
    this.colorChange.emit(this.color);
  }

  /**
   * Permet d'ouvrir le color picker sur clic de la prévisualisation de la couleur
   */
  onClickFieldInputColorPreview(): void {
    this.colorPickerInput.nativeElement.click();
  }

  /**
   * Handle wheel event
   */
  @HostListener('window:wheel', ['$event'])
  onWindowScroll(event: WheelEvent) {
    this.adjustColorPickerPosition();
  }
}