dialog content partly hidden when richtext inside container with overflow: hidden

[Matthieu]

Hi,

We are facing an issue with image selector dialog in richText component.

If component is inside container with overflow: hidden, the dialog is partialy hidden:

but the selector of paragraph is correct:

Thanks,

Regards,

Matt

[Vinitha Jeyakumar]

Hi Matthieu,

We suggest changing the dialog target as a document body element and changing it to a modal dialog using the dialogOpen event. Please find the below code and sample for your reference.

Code snippet:

<div class="control-section" style="overflow:hidden;width:400px">

  <ejs-richtexteditor

    #toolsRTE

    id="alltoolRTE"

    [toolbarSettings]="tools"

    [showCharCount]="true"

    (dialogOpen)="dialogOpen($event)"

  >

  </ejs-richtexteditor>

</div>

 dialogOpen(args: object): void {

    (args as any).element.ej2_instances[0].target = document.body; // Changed dialog target

    (args as any).element.ej2_instances[0].isModal = true; // Changed to modal dialog

    (args as any).element.ej2_instances[0].dataBind();

  }

.e-rte-img-dialog {

  height: 380px !important;

  left: 0px !important;

  top: 100px !important;

}

.e-rte-link-dialog {

  height: 380px !important;

  left: 0px !important;

  top: 0px !important;

}

.e-upload.e-control-wrapper,

.e-bigger.e-small .e-upload.e-control-wrapper {

  display: none;

}

.e-browsebtn.e-btn {

  margin-top: 65px;

}

Sample: https://stackblitz.com/edit/angular-ryweqd-syt1pd?file=app.component.ts,app.component.css

Regards,

Vinitha