Layout shrinks to the left part after screen rotation

[Xu]

Hello, I am using the rich text editor to edit large word documents.

 

I noticed that if the screen rotation happens from portrait to landscape, all the content will shrink to the left part, with the right half empty,.and cannot be fixed unless you rotate it back.

 

Actually even when initially loaded, the horizontal scrollbar is wider than the content, which might be the reason causing the problem?

 



 

Is there a way to fit the scrollbars to the content, and make it display as expected during device rotation ?

 

I really needs to fix this 

 

Regards

[Yana]

Hi Xu,

Thank you for sending the screenshots.

I've tested the use case in our examples, still, I wasn't able to reproduce the reported behavior.  I've attached a short screencast showing how it looks on my side on Android emulator, would you take a look and let me know if I'm missing something?

I look forward to your reply.

Regards,
Yana
Progress Telerik

[Xu]

Hello Yana,

Thank you so much for your test and reply.

I guess the issue has something to do with specified files.  

When my document is initially loaded,  the RTE control just covers approximately half of the width of  the doc, as you can tell from the horizontal scroll bar from my screenshot.

And the RTE will automatically adapt to the maximum width of the document when orientation changed,  that's why the shrinking happens.

So probably the solution to the issue is to make some "crop" to the document when loading, cutting the right blank part, by improving the docx to html converter. Or keep the scale value even when orientation changing happens instead of adapting to the screen width.

I am sharing the docx file I am using for your test.

Hope it would make some help.

 

Regards,

 

Xu

[Xu]

I tried to upload my document to dropbox, please checked if you'd like.

 

Thank you.

 

https://www.dropbox.com/scl/fi/5n5pk03qww5z0mk17g1rj/.docx?dl=0&rlkey=mco6dq4qoug7csmzhwmwuo3qa

[Xu]

And I finished gif recording, please kindly check it.

[Yana]

Hello Xu,

Thank you for sending the word document, it's really helpful.

We're currently testing the case, I would write back as soon as I have more information (in a day or two at latest).

Regards,
Yana
Progress Telerik

[Yana]

Hi Xu,

Thank you for your patience regarding this issue,

We thoroughly researched the case and we managed to reproduce the erroneous behavior only with the provided docx file. The layout is properly adjusted in our examples with other html content we have.  For the time being I cannot tell whether the reason lies in something specific in the content, or this is due to the conversion to html.  I've logged it as a bug report on your behald in our public feedback portal,  you can track its status at the following link:

RichTextEditor: [Android] Layout is not properly adjusted after screen rotation when visualizing specific html content

I am afraid there isn't a suitable workaround I can suggest at the moment.

I'm sorry for any inconvenience caused.

Regards,
Yana
Progress Telerik

[Xu]

Hi, Yana. Thank you very much for your patience. I am glad if I could be of any help.

[Xu]

Hi Yana, it's me again. 

After researching, I finally find out the cause of the problem.

It's the images with specified width values, and any other html elements with large enough width properties.

I believe in many scenario, developers are using Rich Text Editor to loading rtf / docx files.

In those cases, image are usually specified in width, and the width properties are kept during the  rtf / docx to html conversion.

Regarding the xamarin TelerikRichTextEditor, when the control's width is smaller than the <img width/> property, a horizontal scroll bar will be shown, since initially the html file seems to be loaded through a auto-adjusted zoom factor to ensure the size of the text on the screen, and text is wrapping based on the screen width (not the document width, desktop browsers also do this) see the attachment 1.

And after the screen rotation, the text wrapping fits the screen width well,  and everything works great.

(see the attachment 2)

 

However, after   rotating back to portrait, the control is turned into an width-fit mode, the zoom factor is automictically adjusted and the html page's is  now shown in full width (the horizontal scrollbar is gone) while the text wrapping is also based on previous portrait layout, not the current one,( or probably just a zoom factor mode). And that's why after screen rotations the layout becomes weird. Please see the attachment 3.

According to above analysis, I guess other html elements ( tables etc.) with a large width would cause the problem either.

Simply an html page with several paragraphs and a wide enough image will be able to reproduce the case.

For now, I am considering to convert all images' width value into "100%" to resolve the problem.

But still hoping the layout issue could be fixed.

 

Regards,

 

[Yana]

Thank you for researching and sharing these finding with us, much appreciated.  I've added this information to our internal item, so the dev team will have it in mind when working on the issue. 

I'm glad to hear you've managed to find a feasible workaround to the width problem, still, this is a layout issue and we definitely consider it for fixing.

[Xu]

Thank you Yana,   your reply appreciated.