This is a migrated thread and some comments may be shown as answers.

Layout shrinks to the left part after screen rotation

6 Answers 245 Views
RichTextEditor
This is a migrated thread and some comments may be shown as answers.
Xu
Top achievements
Rank 1
Xu asked on 10 Apr 2021, 11:36 AM
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

6 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 12 Apr 2021, 10:59 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Xu
Top achievements
Rank 1
answered on 12 Apr 2021, 11:44 AM

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

0
Xu
Top achievements
Rank 1
answered on 12 Apr 2021, 11:53 AM

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

0
Xu
Top achievements
Rank 1
answered on 12 Apr 2021, 12:37 PM
And I finished gif recording, please kindly check it.
0
Yana
Telerik team
answered on 15 Apr 2021, 10:18 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
Yana
Telerik team
answered on 21 Apr 2021, 03:35 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Xu
Top achievements
Rank 1
commented on 17 May 2021, 02:23 AM

Hi, Yana. Thank you very much for your patience. I am glad if I could be of any help.
Xu
Top achievements
Rank 1
commented on 04 Sep 2021, 02:53 AM

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
Telerik team
commented on 08 Sep 2021, 08:27 AM

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
Top achievements
Rank 1
commented on 09 Sep 2021, 01:50 AM

Thank you Yana,   your reply appreciated.

Tags
RichTextEditor
Asked by
Xu
Top achievements
Rank 1
Answers by
Yana
Telerik team
Xu
Top achievements
Rank 1
Share this question
or