Loading multiple documents in multiple iframes causes width issues

[Raoul]

Hi, hope this is the right place for it.

I’m loading multiple documents within multiple iframes but only the iframe i have focused during loading sets the correct width.
The other iframes display the right bar beyond the iframe and the width is set more that the iframe width.

Focused iframe: <div id="id_main" class="block_elem" style="touch-action: none; user-select: none; background-color: rgb(226, 226, 226); overflow: hidden; left: 0px; top: 0px; width: 1072px; height: 590px; display: block; cursor: text;" unselectable="on">

Other iframe: <div id="id_main" class="block_elem" style="touch-action: none; user-select: none; background-color: rgb(226, 226, 226); overflow: hidden; left: 0px; top: 0px; width: 1232px; height: 590px; display: block; cursor: default;" unselectable="on">

(I can’t upload screenshots)

What would be the best way to set the size properly?

[Constantine]

Hello @Raoul

I have increased your trust level so you can post several screenshots in one post/reply.
Please provide screenshots for better understanding of the faced problem.

[Raoul]

Hi @Constantine

This is the iframe that is focused during loading

this is on that loads in a hidden div

[Constantine]

Hello @Raoul

Thank you for the screenshots.
What is the reason to use 2 editors on the same page?

@Raoul

Focused iframe: width: 1072px;

@Raoul

Other iframe: width: 1232px;

Do I understand correctly that the different width was set intentionally?

[Raoul]

Hi @Constantine

The user is essentially working on multiple documents at the same time and I want to reduce load times, so I want to preload the different documents and just hide / show the divs accordingly.

Those values were taken from looking at the content of the iframe after loading through the console. Those values are set by onlyoffice after the wopi request.

[Constantine]

@Raoul

The user is essentially working on multiple documents at the same time and I want to reduce load times, so I want to preload the different documents and just hide / show the divs accordingly.

Could you provide a video demonstration of this scenario?
Note that Document Server will always go through the process of Opening the file even tough several editors are opened on the same page.

[Raoul]

The user isn’t working on the same document but different page but completely different documents.

Hope this gif helps

[Constantine]

Hello @Raoul

@Raoul

The user isn’t working on the same document but different page but completely different documents.

I’m quite confused. Do you mean that, for example, 2 separate editor frames are located on the same page and containing 2 different documents? If I’m mistaken please elaborate.

If your goal is to make width of both editors equal then try setting the same width for them in case both of your iframe elements also have the same width.
If you final goal is different, please describe it in details.

[Raoul]

Hi @Constantine

Yes thats correct there are multiple editor iframes each pointing to a different document. The user switches between them by hiding and showing the iframe.

I have tried to set the iframes to a fixed width but the issue still occurs that the content within the iframe that isn’t focused is set to a width beyond that of the iframe.

[Constantine]

Hello @Raoul

Thanks for the clarification.
I’m checking the situation. I will update this thread when any news come up.

[Constantine]

Hello @Raoul

Please describe in detail how exactly you are hiding editors. Are they getting hidden via parent div?

[Raoul]

The editors are being hidden by setting display: none on the parent div

[Constantine]

Hello @Raoul

Thank for the info.
Please check your PM messages.