DocumentEditor Not loading properly

[cipl 1177]

<ejs-documenteditorcontainer

  height="600px"

  serviceUrl="https://services.syncfusion.com/angular/production/api/documenteditor/"

  [enableToolbar]="true">

</ejs-documenteditorcontainer>

Why its not loading properly any idea. i imported all the modules properly its not loading for me properly

Responsive chagne time scroll bar came but menu is not showing properly

[Sujitha Siva]

Hi,

We attempted to replicate the issue shown in the image by creating a simple Angular sample with the DocumentEditor. However, the Document Editor rendered properly without any issues. Kindly refer to the screenshot below.

 

To investigate the issue further, please provide the following details:

1. Document Editor version you are using.
2. We have shared the Angular sample we used for testing. Kindly refer to it, make the necessary changes on your application.
3. If you are still facing the issue, please share the sample you tried on your end. We will reproduce it on our side and provide an appropriate solution.

 

Additionally, we noticed that you are using an outdated service URL.

Starting from v31.x.x, the web services project of the Document Editor component has been separated and hosted as an independent service. The new hosted web services URL is: 'https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/'.

 

Note: The hosted Document Editor component web services URL is intended solely for demonstration and evaluation purposes only. For production deployments, please host your own web service with your required server configurations. You can refer and reuse the GitHub Web Service example or Docker image for hosting your own web service and use it.

 

 Regards,

Sujitha S

Attachment: Angular_Application_dbb9b942.zip

[cipl 1177]

Now its loading but styles not applying properly what was the reason. i added all the css import but not working properly css only 

@import '../../../node_modules/@syncfusion/ej2-angular-base/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-icons/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-lists/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';

@import "../../../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css";

[cipl 1177]

Now its loading but styles not applying properly what was the reason. i added all the css import but not working properly css only 

@import '../../../node_modules/@syncfusion/ej2-angular-base/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-icons/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-buttons/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-inputs/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-lists/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-navigations/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-popups/styles/material.css';

@import '../../../node_modules/@syncfusion/ej2-richtexteditor/styles/material.css';

@import "../../../node_modules/@syncfusion/ej2-angular-documenteditor/styles/material.css";

[cipl 1177]

Am using ejs dialog may that one is causing issue . and mobile responsive time not refresh the documenteditor toolbar

  <ejs-dialog

    #Dialog

    [buttons]="dlgButtons"

    [showCloseIcon]="showCloseIcon"

    [minHeight]="height"

    [target]="target"

    (open)="dialogOpen()"

    (close)="dialogClose()"

  >

    <div>

      <div id="default_title_bar" class="e-de-ctn-title"></div>

      <div>

        <ejs-documenteditorcontainer

          #documenteditor_default

          [enableToolbar]="true"

          height="600px"

          style="display:block;"

        ></ejs-documenteditorcontainer>

      </div>

    </div>

  </ejs-dialog>

[Sujitha Siva]

Hi,

We are currently reviewing your query based on the information provided. We will get back to you with further updates on February 6, 2026.

Regards,

Sujitha S

[Sujitha Siva]

Hi cipl,

We attempted to reproduce the style issue shown in the provided image. Based on the information shared, we also tested the DocumentEditor inside a dialog component using the same styles. However, in our testing, the DocumentEditor rendered correctly, and all elements in the property pane appeared as expected.

 

 

To investigate this issue further, we kindly request that you share a runnable, simplified application where the style issue occurs. Alternatively, as mentioned in our previous update, please try to replicate the issue using our sample application so we can analyze it further and provide appropriate solution.

 

Regarding mobile responsiveness:

 

Currently, DocumentEditor does not offer full-fledged support for mobile usage.

 

We have already been logged as a feature request. At this time, we do not have immediate plans to implement this feature. During each release cycle, we review all open feature requests and prioritize them based on feature ranking, number of customer requests, and overall demand.

 

You can track the status of this feature request through the feedback portal link below:

Provide mobile view with document editing support for Document editor in JavaScript | Feedback Port…

 

Regards,

Sujitha S

 

Attachment: Angular_Application_1_7eab47a5.zip