ColorPicker - Website scrolls/stutters upwards when opened

[Peter Linecker]

Hello Syncfusion Team,

I've found a problem with the ColorPicker. When you open the ColorPicker and the cursor is on top (brightness is all the way up) the website stutters a few pixel upwards. I found out that it is only when the cursor (the small circle) is sticking out on top. 

I have attached a short video demo.

Do you know how to fix this?

Kind Regards, Peter

Attachment: Syncfusion_ac55ddac.zip

[Sangeetha Priya Murugan]

 

Hi Peter, 

 

We need to validate more on your reported issue. So, we will update you the further details on March 11^th, 2022. 

 

Regards, 

Sangeetha M 

[Sangeetha Priya Murugan]

Hi Peter, 

 

We have checked your reported issue and suggest you to set the visibility hidden for handler element and make it as visible in open event before focus the element as like as below. 

 

 public onOpen(args: any): void { 

    args.element.querySelector('.e-handler').style.display = 'inline'; // handler element 

    (args.element.querySelector('.e-handler') as any).focus({ 

      preventScroll: true, 

    }); 

  } 

 

 

.e-container .e-hsv-container .e-handler { 

  display: none; 

} 

 

 

Sample Link: https://stackblitz.com/edit/angular-6wa96k?file=app.component.css  

 

Could you please check the above details and get back to us, if you need any further assistance on this. 

 

Regards, 

Sangeetha M 

[Peter Linecker]

Hi Syncfusion-Team,

your answer is working but I have found (in my opinion) an even better solution.

When you have multiple colorpickers and do not want to change every single one to have this onOpen method, you can put this code in your styles.css:

.e-colorpicker-popup.e-popup-open {

    .e-container .e-hsv-container .e-handler {

        display: inline;

    }

}

.e-colorpicker-popup.e-popup-close {

    .e-container .e-hsv-container .e-handler {

        display: none;

    }

}

This will change every color picker since the style is in your global css file and you don't have to do anything in html or typescript to fix this bug.

Kind Regards, Peter

[YuvanShankar Arunagiri]

Hi Peter,

Thanks for sharing this solution. Please let us know if you need any other assistance.

Regards,

YuvanShankar A