Background color toolbar resize issue (not showing all colors until clicked twice)

[Hans Christian]

I found another issue reported by our user. We are a using a small size panel to contained our rich text editor, and we encountered a report where the background color toolbar is not showing the entire colors options on the first clicked, but will then fix the size itself on the second click and show all the colors.

See this recording here on repro: https://app.screencast.com/gMvfGzXm1qyU2, the repro is a bit tricky as you need to make sure the rich text editor size is at certain width.

Repro (Based on recording):

• I'm using the same stackblitz as my other ticket: https://stackblitz.com/edit/mugbfx-juwgoa?file=index.html,index.js
• Rich text editor width is roughly at 474.4
• 
  
• Click the background color toolbar icon, noticed that the last few columns of the colors are cut out
• Now click again the second time on the background color toolbar, now the entire colors are shown just fine
• Refresh the page and repeat, noticed that the issue always persist on the first click

Thanks.

[Kokila Poovendran]

Hi Hans Christian,

We have considered the reported issue “Collision does not occur properly when resizing the window and opening the background color toolbar popup” as a bug from our end and the fix for the issue will be included with our upcoming patch release, which is expected to be rolled out by the end of December 2024. Now you can track the status of the reported issue through the feedback below,

Feedback Link: Collision does not occur properly when resizing the window and opening the background color toolbar popup in JavaScript | Feedback Portal

Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”

[Hans Christian]

Thank you.

[Kokila Poovendran]

Hi Hans Christian,

We have included the fix for the issue "Font color and background color picker popup position." with our package version 28.1.36. So, can you please upgrade your package to the latest to resolve the issue from your end?

 

Release notes: Essential Studio for EJ2 JavaScript Weekly Release Release Notes

Root cause: The color picker container being initially styled with display: none, leading to a width of 0px. So, the collision not able to calculate properly from color picker side.

[Kokila Poovendran]

Hi Hans Christian,

We apologize for the inconvenience caused. Please find the release notes details below:

https://ej2.syncfusion.com/javascript/documentation/release-notes/28.1.36?type=all#richtexteditor