Nativescript: iOS: HtmlView content is cropped when using it inside ScrollView

[felixkrautschuk]

Did you verify this is a real problem by searching the NativeScript Forum and the other open issues in this repo?

_Yes_, and I found this post on Stackoverflow, which describes exactly what I am noticing, even without Angular:
Link to the original post

Tell us about the problem

See the description of the StackOverflow thread here

Which platform(s) does your issue occur on?

iOS

Please provide the following version numbers that your issue occurs with:

• CLI: 4.1.0
• Cross-platform modules: 4.1.0
• Runtime(s): tns-ios 4.1.0

Thank you in advance.

---

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[felixkrautschuk]

To reproduce this issue, you can have a look at the following sample app:
HtmlViewIssue.zip

<Page navigatingTo="onNavigatingTo" class="page">
    <GridLayout rows="*">
        <ScrollView>
            <GridLayout rows="*">
                <HtmlView html="{{ content }}"/>
            </GridLayout>
        </ScrollView>
    </GridLayout>
</Page>

After a timeout of 500ms, I assign some html string to the _content_ property of the Observable. I use the timeout to simulate a server request scenario.

You should get this output:

(Android Tablet on the left, iOS simulators in the middle and on the right side)

The HtmlView is sized correctly on Android, but not on iOS.

[tsonevn]

Hi @felix-idf,
Thank you for the attached sample project. I tested this case on my side and have to confirm that there is an issue with setting up the correct HTMLView's height when the content is changed dynamically on iOS. I logged this as a problem, and we will investigate it further.
Meanwhile, you can calculate the content height, while using the native component's frame and set it via code behind after you changed the HtmlView content. For example:

if(platformModule.isIOS){
                let view = page.getViewById("hvid");
                let textfield = view.nativeView;
                fixedHeight = textfield.frame.size.height
                let newSize = textfield.sizeThatFits(CGSizeMake(Number.MAX_VALUE, fixedHeight));
                let newFrame = textfield.frame;
                let newHeight = fmaxf(newSize.height, fixedHeight);
                page.bindingContext.set("setheight", newHeight);

            }

You can also review the attached sample project.
Archive.zip

[felixkrautschuk]

Hi @tsonevn
thanks for your fast reply and for the provided sample project.
However, it also does not work correctly. It shows more from the actual html content, but not the full content on iOS (you can compare the htmlview output with the actual html content provided in the source code). In addition, you can see some strange behaviour when changing the orientation of the iOS device. On Android everything works as expected.

I hope that this issue may be fixed soon, as we have situations where we need to show scrollable html content this way.

[felixkrautschuk]

I just noticed the following:

when not using your ios specific code for calculating the new height, and I just hange the orientation of the device, the content is shown in the full length as expected.

But having a look to the APIs of the htmlview component, there does not seem to be any _reload_ or _refresh_ method.

[felixkrautschuk]

@tsonevn ,

after some research, I believe that this is a native ios problem. Other developers seem to have a similar problem, like you can see here: StackOverflow thread

I found out that in addition to your suggested workaround, the call of the sizeToFit method seems to do the trick here:

var hv = page.getViewById('htmlview');

//... assign the html content here

if(hv.ios) {
            var nativeHtmlView = hv.nativeView;

            nativeHtmlView.sizeToFit();

            var fixedHeight = nativeHtmlView.frame.size.height;
            var newSize = nativeHtmlView.sizeThatFits(CGSizeMake(Number.MAX_VALUE, fixedHeight));
            hv.height = fmaxf(newSize.height, fixedHeight);
}

[manijak]

I can confirm this issue on 4.1.2 as well using vanilla TNS.
Navigating to a htmlview the first time makes the view cropped. If I go Back and then open the same view again, it looks as it should.

[felixkrautschuk]

It looks like you do not have to call any native ios code for calculation.

Calling htmlview.requestLayout(); seems to do the same.

[Johanneke]

I'm on version 4.2 and I don't see this issue anymore.

[tonyhogben]

This still appears to be an issue in NS 6.3.3 Core - what is the recommended approach?

Here's my code...

<Page xmlns="http://schemas.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo">
    <ActionBar class="action-bar">
        <Label class="action-bar-title" text="HTML Page"></Label>
    </ActionBar>
    <GridLayout rows="*">
        <ScrollView>
            <GridLayout rows="*">
                <HtmlView id="htmlview" html="{{ terms }}"/>
            </GridLayout>
        </ScrollView>
    </GridLayout>
</Page>

import { Observable } from "tns-core-modules/data/observable";
import { getString } from "tns-core-modules/http";
import { isIOS } from "tns-core-modules/ui/page/page";
import { HtmlView} from "tns-core-modules/ui/html-view"
import { Frame } from "tns-core-modules/ui/frame/frame";

export class TermsViewModel extends Observable {
    terms: string;

    constructor() {
        super();

        getString("<URL>").then((r: string) => {
            this.set("terms", "<font face='sans-serif'>" + JSON.parse(r) + "</font>");

            if(isIOS){
                let htmlview = <HtmlView>Frame.topmost().getViewById("htmlview");
                htmlview.requestLayout();
            }                      
        }, (e) => {
            console.log(e);
        });
    }
}

[sebj54]

This is still occurring in NS 6.5.

Here is a workaround (vue):

<template>
    <scroll-view>
        <stack-layout @layoutChanged="refreshHtmlView">
            <html-view
                v-if="isMounted"
                ref="htmlView"
                :html="content"
            />
        </stack-layout>
    </scroll-view>
</template>

<script>
import { isIOS } from 'tns-core-modules/platform'

export default {
    data() {
        return {
            content: '', // HTML is here
            isMounted: false,
        }
    },
    methods: {
        refreshHtmlView() {
            if (isIOS) {
                this.isMounted = true
                if (this.$refs.htmlView) {
                    setTimeout(() => {
                        this.$refs.htmlView.nativeView.requestLayout()
                    }, 50)
                }
            }
        },
    },
}
</script>

[beloitdavisja]

Just upgraded from NS 6.1 to 6.5 and this has gotten worse. Our page that had been working with the nativeElementView.requestLayout() workaround, now only works less than half the time.

[jigarsangoi]

@beloitdavisja try same thing in webview. As per my experience I found that HtmlView will only work if your content wont changed based on user actions. ASA content changed dynamically HtmlView start giving issue.

[beloitdavisja]

@jigarsangoi I have not been able to get WebView to render from an html string at all. String is being returned via JSON from an API request.

[jigarsangoi]

@beloitdavisja you can assign HTMLStr to "src" attribute of WebView. Read Documentation

[beloitdavisja]

@jigarsangoi i did read the docs and used the src attribute. It does not display anything

EDIT: the html does render if WebView is the only thing on the page. It doesn't appear to like being nested below the first child of the page-content element. WebView does not look like it will work for my case. HtmlView _would_ work if not for the reported bug.

[jigarsangoi]

@beloitdavisja, I attached my code with demo in video. I had similar problem which I only able to solve by WebView. You can remove elment Id and textWrap once for webview.