We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

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

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


1 Reply

VJ Vinitha Jeyakumar Syncfusion Team November 25, 2022 08:18 AM

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(argsobject): 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 {
  height380px !important;
  left0px !important;
  top100px !important;
}
.e-rte-link-dialog {
  height380px !important;
  left0px !important;
  top0px !important;
}
.e-upload.e-control-wrapper,
.e-bigger.e-small .e-upload.e-control-wrapper {
  displaynone;
}

.e-browsebtn.e-btn {
  margin-top65px;
}





Regards,
Vinitha



Loader.
Live Chat Icon For mobile
Up arrow icon