Different behaviour in image dropdown button

[Gaspar Blein]

Hello, 

We have noticed that  the  image droprdown button has a different visual behaviour than the rest. In this case when we click on it the menu layer is not displayed in the foreground

Nevertheless, the rest of the dropdown buttons are always displayed in the foreground

Is there a way to get the same behaviour for all buttons?

Thank you in advance for your answer and regards

Gaspar

[Vinothkumar Yuvaraj]

Hi Gaspar Blein,

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.

<style>

.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;

}

.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;

}

</style>

<script>

<ejs-richtexteditor :dialogOpen="dialogOpen"

   :dialogClose="dialogClose">

</ejs-richtexteditor>

 

export default Vue.extend({

methods: {

    dialogOpen: function (args) {

      args.element.ej2_instances[0].target = document.body; // Changed dialog target

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

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

    }

    dialogClose: function (args) {

      document.getElementsByClassName("e-dlg-container")[0].remove();

    },

  },

});

</script>

 

Sample : https://codesandbox.io/s/rich-text-editor-vue-forked-hmrj4x

Documentation : https://ej2.syncfusion.com/vue/documentation/api/rich-text-editor/#dialogopen

Regards,

Vinothkumar

[Gaspar Blein]

Hi  Vinothkumar, 

We dont' like this solution too much because it forces us to modify the dom outside he vue mechanism and this provoke vue reevaluate all the reactive properties used inside our template.

Nevertheless, we tried your suggestion but it doesn't work propely.  On the one hand the modal dialog appears separatedly from the button on the rigt side of the secreen

On the oher hand once we close the dialog, next time we click on it, the dialog  never appears again

Thank you in advance for your help and regards

Gaspar Blein

[Vinothkumar Yuvaraj]

Hi Gaspar Blein,

We understand that the RichTextEditor image or link popup dialog is being hidden when it exceeds the container height. Based on your description, it sounds like the RichTextEditor component may be rendered inside a container that has a "overflow: hidden" style.

In order to help us better understand and address your issue, could you please provide us with your full page code or a runnable sample that demonstrates the problem? This will allow us to replicate the issue at our end and work towards finding a resolution.

[Gaspar Blein]

Hi Vinothkumar.

Firstly, sorry for the delay in replying.

As you say our container has the overflow: hidden style. That is because we don’t want our container grow up.

 We want it always maintain the same size. The main problem we see is that when we click the attach image or the attach file button the popup is rendered inside the control as you can see in the image below.

But when we click in any other button of the toolbar, the popup is rendered as child of the body element and it works well as we can see next: