How do I add something like <input type = "color"> for my quill toolbar's option to change the...

`So, I came across this problem, where I was required to implement a full range of color options for quill toolbar. Context: It is from ngx-quill, and using in Angular.

Followed this post: [https://stackoverflow.com/questions/52584036/quilljs-allow-user-to-pick-color-like-input] and tried to implement the same and was successful at it. But my only concern here is: The color-picker appears at the top left corner of my screen, which looks odd. Tried adding the css but it doesn't seem to work.

Here's my work:

ngAfterViewInit() {
this.setupColorPicker();
this.editors.changes.subscribe(() => {
this.setupColorPicker();
});
}

setupColorPicker() {
this.editors.forEach((editorComponent, index) => {
this.colorPicker(editorComponent, index);
});
}

colorPicker(editorComponent: QuillEditorComponent, index: number){
const quill = editorComponent.quillEditor;
const toolbar = quill.getModule('toolbar');
if ((toolbar as any).handlerExists) return;
(toolbar as any).handlerExists = true;
toolbar.addHandler('color', (value) => {
if (value === 'color-picker') {
let picker = document.getElementById(`color-picker-${index}`) as HTMLInputElement;
const onChange = () => {
const selection = quill.getSelection();
if (selection && selection.length > 0) {
quill.format('color', picker.value);
} else {
quill.format('color', picker.value);
}
};
if (!picker) {
picker = document.createElement('input');
picker.id = `color-picker-${index}`;
picker.type = 'color';
picker.value = '#FF0000';
picker.style.display = 'none';
document.body.appendChild(picker);
}
const newPicker = picker.cloneNode(true) as HTMLInputElement;
picker.replaceWith(newPicker);
picker = newPicker;
picker.addEventListener('change', onChange, false);
const colorPickerOption = document.querySelector('.ql-color .ql-picker-options [data-value="color-picker"]') as HTMLElement;
if (colorPickerOption) {
picker.style.position = 'absolute';
picker.click();
}
} else {
quill.format('color', value);
}
});
}

• 
  I tried to find from where the css is coming from, but as soon as I click on 'Inspect' the color picker vanishes.
  
  
• 
  Tried appending the picker to various other classes but it behaves the same way.
  
  
• 
  Tried adding explicit css in .css file but no use. Even use of '!important' doesn't seem to work.
  
  
• 
  If any other display property is used, it then moves inconsistently here and there.
  
  
• 
  Tried using pointer location, but that is not consistent too..`
  

Continue reading...