An error is causing the layout of the page to break.

[Yonz]

This is the error

The color picker is on the top left of the screen due to error.

[YuvanShankar Arunagiri]

Hi Yonz

We have validated your reported query and prepared the sample based on your shared screenshot. But we are unable to reproduce the reported issue on end. Refer to the sample link below.

Sample link: https://stackblitz.com/edit/angular-cfq1wcsn-2jsgfr3a?file=src%2Fapp.component.html

Kindly share the below requested details for further validation.

• Share the color picker code snippet or issue replicable sample.

• Share the details on how you render the color picker with other components (sample).

• Share the package.json file of your project.

• Share the issue replication steps with a video demonstration.

Based on the above details, we will check and provide a better and quicker solution.

Regards,

YuvanShankar A

[Yonz]

Hi Please see the attached file. thank you

Attachment: Codes_c18d6249.zip

[YuvanShankar Arunagiri]

Hi Yonz,

We have reviewed the sample code you provided and created a similar implementation based on your details. However, we were unable to reproduce the reported issue on our end.

To assist you further, we have attached our sample for your reference. Please review it, and if there are any differences from your implementation, we kindly request you to modify the sample to replicate the issue. This will help us analyze the scenario more effectively and provide you with the best possible solution.

Regards,

YuvanShankar A

Attachment: angcolorpicker_721872bb.zip

[Yonz]

Hi, good afternoon.

I have successfully replicated the issue. Please follow the steps outlined in the attached file. Thank you

Attachment: Files_8ba53bd4.zip

[YuvanShankar Arunagiri]

Hi Yonz,

We have reviewed your provided details with the sample file; we suspect that the root cause of the reported issue is not related to the color picker source code. Due to duplicate packages installed for the project dynamically, it may cause issues. Based on your replication steps, when already certain Syncfusion package installed with ^ sign and again you are installing the document-editor package, it may lead to conflicts. To resolve this type of issue. You use the ~ sign instead of ^, since it is best practice to avoid any major version upgrade conflict, and it will bring the latest patch of the current version.

Upon reviewing your package.json file, we noticed that the ej2-base and ej2-data dependency. These are sub-dependent packages and will be automatically installed with our Angular component packages. So, only including our Angular component package is sufficient.

Additionally, this issue may occur due to duplicate packages installed in your application. Follow the steps below to resolve the issue.

• Delete the @Syncfusion folder from node_modules and the package-lock.json, .angular file from the root folder.
• Clear the npm cache file at your end: npm cache clean --force. 
• Update our packages to the same major version. For example, if you are using a version like (i.e., v27.1.XX), use the same version for all the Syncfusion components in the package.json file. 
• Run the ‘’npm install” command to install the Syncfusion packages again.

Please let us know if you need further assistance.

Regards,

YuvanShankar A

[Yonz]

Thank you very much. It works!!

[YuvanShankar Arunagiri]

You are welcome, Yonz. Please get back to us if you need any further assistance on this.

If that post is helpful, please consider accepting it as the solution so that other members can locate it more quickly.