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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Trying to add multiple Component containing RichTextEditor on the page with Tab,

Thread ID:

Created:

Updated:

Platform:

Replies:

141489 Dec 13,2018 10:07 PM UTC Dec 17,2018 10:06 AM UTC Angular - EJ 2 3
loading
Tags: RichTextEditor
TCHOKOANI SIEBATCHEU NOUBISSIE Steve Emmanuel
Asked On December 13, 2018 10:07 PM UTC

Hello,
Having difficulty to dd multiple Component containing RichTextEditor on the page with Tab, The first Tab component display Well the RichTextEditor  but on the second tab item, the component doesn't display the RichTextEditor  toolbar and is not editable.

Even if I call the same component with RichTextEditor on different Tab item, it will display well(the RichTextEditor ) on the first Tab item, but not on the second tab item

Prince Oliver [Syncfusion]
Replied On December 14, 2018 10:12 AM UTC

Hi Emmanuel, 

Thank you for contacting Syncfusion support. 

We have checked the reported issue in our end, unfortunately ee were unable to replicate the issue. Please find the test sample in the below link: https://stackblitz.com/edit/angular-drqooa-emutce 

To render other component inside tab component, Kindly refer to the following link: https://ej2.syncfusion.com/angular/documentation/tab/how-to/render-other-components-in-tab-using-angular-template/?no-cache=1 

If you are facing any alignment issue on RTE component, we suggest you to refresh the RTE component on Tab’s selected event. Kindly refer to the following API references. 


Kindly check the above attached sample and reference links. If you still face any issues, kindly revert to us by modifying the above sample to replicate the issue or provide your own sample. It will help us provide prompt solution.  

Regards, 
Prince 


TCHOKOANI SIEBATCHEU NOUBISSIE Steve Emmanuel
Replied On December 14, 2018 10:54 AM UTC

""Hello Prince.
Please see below a part of my code component :

<div class="row ">
                                <div class="col-md-6 col-xs-6 col-sm-6  col-lg-6">
                                    <label class="label label_required_font  ">{{'Slider_Item.Form_label_SliderItem_Message_Slider_Item' | translate }}</label>

                                    <ejs-richtexteditor  [height]='height' id='iframeRTE'  
                                                        [readonly]="SliderItem_Message_state" [(value)]='SliderItem_Message'
                                                        [toolbarSettings]='tools'></ejs-richtexteditor>
                                   
                                </div>

                                <div class="col-md-6 col-xs-6 col-sm-6  col-lg-6 no-padding no-margin">
                                    <label class="label label_required_font no-margin no-padding">{{'Slider_Item.Form_label_SliderItem_Message_Eng_Slider_Item' | translate }}</label>
                                    <!--[(ngModel)]-->
                                    <ejs-richtexteditor id='iframeRTE2' [readonly]="SliderItem_Message_state"   [toolbarSettings]='tools'  [(ngModel)]='SliderItem_Message'></ejs-richtexteditor>


                                </div>
                            </div>

This component is called inside 2 Tab item .
On the First, everything is displaying well, on the second tab item, toolbar does not appear and can't be editable(this occur when ejs-richtexteditor "height" is setup or "iframeSettings"  property )

Main issue is with ejs-richtexteditor on the second Tab or When above property are setup

In Addition, the first line of the text is overlay by the toolbar, so not visible till I move to the second line


<ejs-tab id="tab_default" heightAdjustMode='Content'>
                    <e-tabitems>
                        <e-tabitem [header]='headerText[0]' content="#idv1">
                        </e-tabitem>
                        <e-tabitem [header]='headerText[1]' content="#idv2">

                        </e-tabitem>
                        <e-tabitem [header]='headerText[2]' [content]="contentTab3"></e-tabitem>
                    </e-tabitems>
                </ejs-tab>



   <div id="idv1" style="display:none">
                    <form-slider_item> </form-slider_item>
                </div>

                <div id="idv2" style="display:none">
                    <form-slider_item> </form-slider_item>
                </div>

Thanks



Prince Oliver [Syncfusion]
Replied On December 17, 2018 10:06 AM UTC

Hi Emmanuel,  

Thank you for your update. 

We have checked you shared code snippet. It seems that you have rendered the component outside and then rendered it as the tab content. Hence this solution has caused the DOM calculation issue inside the Tab control which led to the reported issue with RichTextEditor component . So, we suggest you use the <ng-template> to render the content in the tab to resolve the issue. Kindly refer to the following code snippet. 

<ejs-tab id="tab_default" heightAdjustMode='Content'> 
  <e-tabitems> 
    <e-tabitem [header]='headerText[0]'> 
      <ng-template #content> 
        <form-slider_item> </form-slider_item> 
      </ng-template> 
    </e-tabitem> 
    <e-tabitem [header]='headerText[1]'> 
      <ng-template #content> 
        <form-slider_item> </form-slider_item> 
      </ng-template> 
    </e-tabitem> 
  </e-tabitems> 
</ejs-tab> 

We have attached a sample for your reference, please find the sample at the following location: https://stackblitz.com/edit/angular-drqooa-cnvorq 

Please let us know if you need any further assistance on this. 

Regards, 
Prince 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;