Update the size of the rich text toolbar

[Tuan Nam Dinh Tran]

Hi Syncfusion team,

I'm currently researching the way to resize the toolbar of the rich text control. Currently, in my application, I have a rich text control wrapped inside a div, and the div's rendered size can change. I find that in some cases, when the div changes in size, the toolbar of the rich text could overflow, and it looks like the toolbar is only resized once I change the size of the whole window. 

Is there a way to resize the toolbar as the size of the parent div changes?

 I tried to use the refresh() function of ej2_instances like this 

• {element}.ej2_instances[0].refresh()

It seems to work until after a while, it throws a lot of errors like this

•  "can't access property 0, {element}.ej2_instances is undefined"

and when I try to console log the {element}, I get a textarea like this

• <textarea id ="-value" class="e-rte-hidden" name = "">

 The id is "-value", which is not the id I assigned the rich text

[Vinitha Jeyakumar]

Hi Tuan,

Your reported issue can be resolved by calling the refreshToolbarOverflow method of toolbarModule using Rich Text Editor's instance, when you resize the Div. Here, we have created a sample for your reference using Rich Text Editor inside a resizing Dialog.

Code snippet:

<div id='container' style="height:400px;">

    <ejs-button id="targetButton" content="Open Dialog"></ejs-button>

    <ejs-dialog open="onOpen" resizeStart="onStart" id='dialog' header='Dialog' allowDragging="true" resizeHandles="resizeDirectionHandles" enableResize="true" width="250px">

        <e-content-template>

            <ejs-richtexteditor id="defaultRTE" created="created">

               

            </ejs-richtexteditor>

        </e-content-template>

        <e-dialog-buttons>

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons1" click="dlgButtonClick"></e-dialog-dialogbutton>

            <e-dialog-dialogbutton buttonModel="@ViewBag.DialogButtons2" click="dlgButtonClick"></e-dialog-dialogbutton>

        </e-dialog-buttons>

    </ejs-dialog>

</div>

<script>

    var rteObj;

    function created() {

        rteObj = this;

       

    }

    function onOpen() {

        rteObj.toolbarModule.refreshToolbarOverflow();

    }

    function onStart() {

        rteObj.toolbarModule.refreshToolbarOverflow();

    }

    window.onload = function () {

        document.getElementById('targetButton').onclick = function () {

            var dialog = document.getElementById("dialog").ej2_instances[0];

            dialog.show();

        }

    }

    function dlgButtonClick() {

        var dialogObj = document.getElementById('dialog').ej2_instances[0];

        dialogObj.hide();

    }

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_ToolOver-2050718817

Regards,

Vinitha