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:

Thank you in advance for your answer and regards

Gaspar Blein

[Vinitha Jeyakumar]

Hi Gaspar,

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

If you don't want to get your container grow up. you can use the height property of the RichTextEditor control to avoid the reported issue at your end, instead of setting fixed height and overflow: hidden style. please check the sample and code below,

Code snippet:

<div class="default-section">

          <ejs-richtexteditor height="200px"> </ejs-richtexteditor>

        </div>

Sample: https://codesandbox.io/s/rich-text-editor-vue-forked-psun3c?file=/src/App.vue

Regards,

Vinitha

[Gaspar Blein]

Hi  Vinitha, 

We dont like use a permanent fix because it forces us to always reserve at minimum 400px hight to show the popup that it will be shown only in the case the user clicks on this specific button (or the attach button).

We can accept your proposal as a workaround but int the long term by design we don't want to reserve so much space when most of the times it won't be necessary

We don't understand why if the other buttons works porperly these two others do not.

Thank you in advance for your answer and regards

Gaspar Blein

[Vinitha Jeyakumar]

Hi Gaspar,

To achieve your both requirement of "avoiding content growing" and "to make the image popup visible inside RichTextEditor" you need to remove the "overflow: hidden" styles from the parent element of the RichTextEditor and set height as "200px" to RTE which will prevent the Editor content from growing and also resolve the image popup hidden issue. please check the sample below,

Sample: https://codesandbox.io/s/rich-text-editor-vue-forked-w29neo?file=/src/App.vue

Regards,

Vinitha