RTE menu not visible when nested in accordion

[Laurent]

Hi,

I can't see the menu of a RTE when it is nested in an accordion. I have tried this piece of code :

<ejs-accordion id="defaultAccordion"> 

    <e-accordion-accordionitems> 

        <e-accordion-accordionitem expanded="true" header="Text Editor" content="#RTE"></e-accordion-accordionitem> 

    </e-accordion-accordionitems> 

</ejs-accordion> 

 

<div style="display: none"> 

    <div id="RTE"> 

        <ejs-richtexteditor id="defaultRTE"> 

            <e-content-template> 

                ------------ 

            </e-content-template> 

            <e-richtexteditor-toolbarsettings items="@ViewBag.tools"> 

            </e-richtexteditor-toolbarsettings> 

        </ejs-richtexteditor> 

    </div> 

</div> 

Regards,

Laurent

[Revanth Krishnan]

Hi Laurent, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “Rich Text Editor menu(toolbar items) not visible when nested in the accordion”. 

 

We are able to reproduce the issue from our end and this issue can be resolved by calling the `refreshUI` public method of the Rich Text Editor in the `expanded` event of the Accordion. We have prepared a sample for your reference, 

 

Code snippet: 

 

<ejs-accordion id="defaultAccordion" expanded="expandedEvent"> 

    <e-accordion-accordionitems> 

        <e-accordion-accordionitem expanded="true" header="Text Editor" content="#RTE"></e-accordion-accordionitem> 

    </e-accordion-accordionitems> 

</ejs-accordion> 

 

<div style="display: none"> 

    <div id="RTE"> 

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

            <e-content-template> 

                ------------ 

            </e-content-template> 

            <e-richtexteditor-toolbarsettings items="@ViewBag.tools"> 

            </e-richtexteditor-toolbarsettings> 

        </ejs-richtexteditor> 

    </div> 

</div> 

 

<script type="text/javascript"> 

    var rteObj; 

    function created() { 

        rteObj = this; 

    } 

 

    function expandedEvent() { 

        rteObj.refreshUI(); 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/162385/ze/RTE_Inside_Accordion1687044425 

 

Please check the above code snippet and the sample and let us know if it resolves your issue. 

 

Regards, 

Revanth 

[Laurent]

Thanks for your reply. It works fine.

Regards,

[Revanth Krishnan]

Hi Laurent, 

 

Thanks for the update. 

 

We are glad that the reported issue has been resolved. Please let us if you need any further assistance. 

 

Regards, 

Revanth 

[Aaron Knipe]

Can this approach be adapted to work with bootstrap tabs instead of the accordion? in my case I have multiple RTE's on the page in bootstrap tabs.

[Aaron Knipe]

found a solution

<script>

    var syncfusionRTE = new Array();

    function onCreate() {

        syncfusionRTE.push(this);

    }

    function refreshRTE(){

        for(let i = 0; i < syncfusionRTE.length; i++){

            syncfusionRTE[i].refreshUI();

        }

    }

</script>

$('#MeetingMinutesTabs').on('shown.bs.tab', function () {

    refreshRTE();

});

[Buvana Sathasivam]

We are glad that your reported issues are resolved. Please get back to us if you need any further assistance.