Javasctip Document Editor is shown the document incorrectly

[Andrew Morgan]

The Document is shown all on the left hand side of the Document Editor (Pictures attached) it will not fill the control. After converting the docx file (its the same on multiple files) i'm showing the document using:

var container = new ej.documenteditor.DocumentEditorContainer({ width: "100%", height: "590px", serviceUrl: hostUrl, zIndex: 3000, documentEditorSettings: { showRuler: true } });

ej.documenteditor.DocumentEditorContainer.Inject(ej.documenteditor.Toolbar);

container.appendTo('#container');

container.documentEditor.open(JSON.stringify(content));

var currentDocument = args.fileDetails[0].name;

container.documentEditor.documentName = currentDocument.replace(".docx", "");

container.documentEditor.isReadOnly = false;

container.documentEditor.enableContextMenu = true;

container.showPropertiesPane = true;

container.resize();

Attachment: Zoomed_in_464f2000.png

[Akshaya Arivoli]

Hi Andrew,

Greetings from Syncfusion support

We attempted to reproduce the issue, “document is shown all on the left hand side of the Document Editor” with the details provided on 30.2.7, but it is working fine. We shared the sample in which we have tried to reproduce the issue along with the video demonstration.

Sample: https://stackblitz.com/edit/wjhgwdkv-ak5plg7k?file=index.js,index.html

Please try the sample provided and revert with the below details. If you still need assistance. These details will be helpful for us to investigate further and assist you better.

1. We suspect that the reported issue is document specific, so please share the input document in which the issue could be reproduced

2. Detailed replication steps to reproduce the issue

3. Product Version details

4. Screenshots/ Video demonstrating the issue in detail.

5. Modified sample in which the issue could be reproducible

6. Code snippet for document to pdf exporting

7. Script errors (if any) 

These details will help us investigate the issue thoroughly and provide a more accurate resolution.

Regards,

Akshaya

Attachment: ZoomRecording__bdf07020.zip

[Andrew Morgan]

Thanks for your reply, I have found the issue. Whilst i was creating a standalone example for yourselves, I narrowed the issue down to the following css, this was being used by another component.

canvas {

        max-width: 500px !important;

        max-height: 500px !important;

    }

[Akshaya Arivoli]

Hi Adrew,

Thank you for the update, and we appreciate you taking the time to investigate the issue further. It’s great to hear that you were able to identify the root cause caused by CSS from other components.

If you need any assistance, feel free to share the snippet or context, and we’ll be happy to help.

Regards,

Akshaya