[enableResize]='true' is not working

[lom]

I added [enableResize] to rich textboxbut i don't see icon in the bottom right corner. [enableResize]='true'

[Revanth Krishnan]

Hi Lom, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “I added [enableResize] to a Rich text editor but I don't see the icon in the bottom right corner. [enableResize]='true'.” 

 

We tried to reproduce the issue by enabling the resize by setting the ‘enableResize’ to true, but we couldn’t reproduce the issue from our end, the resize icon appears and the resizing works properly. We have prepared a sample for your reference, 

Sample: https://stackblitz.com/edit/angular-c78u1d?file=app.component.html 

 

Can you please share the following details? 

• The code snippet of the Rich Text Editor in your application.
• The exact Syncfusion package version used in your application.
• If possible please share us with the issue reproducible sample or please modify the shared sample with the issue reproducing code.

 

The above details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth 

[lom]

                  <ejs-richtexteditor id='additionalInformation1' [enableResize]='true' [height]="200" [toolbarSettings]='rteConfig.tools'

                                      [iframeSettings]='rteConfig.iframe' [fontFamily]='rteConfig.fontFamily'

                                      [(ngModel)]="nameProperty"

                                      formControlName="nameProperty" [disabled]="isReadonly">

                  </ejs-richtexteditor>

export class RteConfig {

  public readonly tools: object = {

    items: ['Undo', 'Redo', '|',

      'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',

      'FontSize', 'FontColor', 'BackgroundColor', '|',

      'Alignments', '|', 'OrderedList', 'UnorderedList', '|',

      'Indent', 'Outdent', '|', 'FullScreen'],

    enableFloating: false,

  };

  public readonly iframe: object = { enable: true};

[lom]

<ejs-richtexteditor id='additionalInformation1' [enableResize]='true' [height]="200" [toolbarSettings]='rteConfig.tools'

                                      [iframeSettings]='rteConfig.iframe' [fontFamily]='rteConfig.fontFamily'

                                      [(ngModel)]="nameProperty"

                                      formControlName="nameProperty" [disabled]="isReadonly">

                  </ejs-richtexteditor>

export class RteConfig {

  public readonly tools: object = {

    items: ['Undo', 'Redo', '|',

      'Bold', 'Italic', 'Underline', 'StrikeThrough', '|',

      'FontSize', 'FontColor', 'BackgroundColor', '|',

      'Alignments', '|', 'OrderedList', 'UnorderedList', '|',

      'Indent', 'Outdent', '|', 'FullScreen'],

    enableFloating: false,

  };

  public readonly iframe: object = { enable: true};

[Indrajith Srinivasan]

Hi Lom, 

 

Good day to you, 

 

We have validated your reported query, with the shared code blocks. We suspect the reported issue occurs, due to the missing import of the ResizeService in the Rich Text Editor. Check the below shared sample and code blocks for reference.

 

Code blocks: 

 

 

import { ToolbarService, LinkService, ImageService, ResizeService, HtmlEditorService } from '@syncfusion/ej2-angular-richtexteditor'; 

 

@Component({ 

    ... 

    providers: [ToolbarService, LinkService, ImageService, ResizeService, HtmlEditorService] 

}) 

 

 

 

Sample: https://stackblitz.com/edit/angular-c78u1d-zmadjx?file=app.component.ts 

 

Sample browser: https://ej2.syncfusion.com/angular/demos/#/material/rich-text-editor/resize-editor 

 

If you are still facing the reported issue, can you replicate the issue in the above shared sample and revert back to us ?. So that we can validate and provide solution at earliest. 

 

Regards, 

Indrajith