The Background Color and Font Color panels are displayed behind the modal

[Aitbouhou Adam]

Hello,

I'm using the RichTextEditor control inside a component that is displayed in a modal. The component itself renders correctly, but when I click the Font Color or Background Color button, the color picker panel is displayed behind the modal instead of in front of it.

The same issue occurs with the Font and Font Size dropdown lists, which are also rendered behind the modal.

Is there a way to ensure these popup panels are displayed above the modal?

Thank you

Attachment: pannelcolor_f16a3df9.png

[Aravind Prabhakaran]

Hi Aitbouhou, 

We attempted to reproduce the reported behavior using the details provided. For validation, we created a sample application using the Angular Bootstrap Modal  where the Syncfusion Rich Text Editor is rendered within the modal dialog content. However, we were unable to observe the reported behavior.

For your reference, we have prepared a sample and video illustration demonstrating our validation results.

Validation Scenarios Covered

As part of our investigation, we thoroughly validated the following scenarios:

• Created a sample using the Angular Bootstrap Modal.
• Rendered the Syncfusion Rich Text Editor inside the Bootstrap modal dialog.
• Opened the Font Color popup from the Rich Text Editor toolbar.
• Opened the Background Color popup from the Rich Text Editor toolbar.
• Opened the Font Name dropdown list.
• Opened the Font Size dropdown list.
• Verified the behavior across the following browsers:
  • Google Chrome
  • Microsoft Edge
  • Mozilla Firefox
• Compared the actual behavior against the scenario described in your report.

Validation Result

We observed that the following popup elements were displayed correctly above the Bootstrap modal dialog:

• Font Color picker
• Background Color picker
• Font Name dropdown
• Font Size dropdown

The expected result matched the actual result in all tested browsers, and we were unable to reproduce the reported issue.

All the above validation scenarios matched the conditions described in your report. However, the issue did not reproduce in any of the test environments we evaluated.

Request for Additional Information

To help us continue investigating and accurately identify the root cause, we kindly request the following details:

• Complete Rich Text Editor implementation code snippet.
• A simple video illustrating the issue reproduction.
• If possible, a simple issue-reproducing sample or a modified version of the attached sample that demonstrates the reported behavior.
• Any custom CSS related to:
  • Modal/Dialog components
  • z-index configurations
  • Overflow settings
  • Popup-related styling

This information will help us reproduce the issue in an environment similar to yours and provide an appropriate solution.

We appreciate your cooperation and look forward to your feedback.

 

Attachment: RTEModalDialog_7fb76679.zip