Nativescript: Webview not working on ios runtime

[tsonevn]

_From @calebeaires on January 8, 2017 21:52_

WebView show on Android runtime, but not on ios runtime. Html is a simple page with a simple div. Here is the code.

XML

<ActionBar class="action-bar" [title]="ler.passoTitulo">
</ActionBar>
<StackLayout class='card'>
    <GridLayout class="box" rows="auto" columns="auto, *, auto, auto">
        <Image col="0" src="~/img/Notes.png"></Image>
        <Label col="1" class="label-title" [text]="ler.passoTitulo"></Label>
        <Button col="2" class="fa" (tap)="onBackText()" *ngIf="!hideBackButton" text="&#xf0a8;"></Button>
        <Button col="3" class="fa" (tap)="onNextText()" *ngIf="!hideNextButton" text="&#xf0a9;"></Button>
    </GridLayout>
    <StackLayout>
        <WebView *ngIf="ler.texto" [src]="ler.texto"></WebView>
    </StackLayout>
</StackLayout>

Nativescript: 2.4
ios emulator: ios 9.2

_Copied from original issue: NativeScript/ios-runtime#706_

[tsonevn]

Hi @calebeaires,

Thank you for your issue.

When you use WebView inside the StackLayout, you should also specify the height of the component, otherwise the height will not be set correctly and the WebView will not be displayed in iOS.
Another option is to use GridLayout for parent container, instead of StackLayout. I am providing sample code snippets for this case.

app.component.html

<ActionBar class="action-bar" title="Title">
</ActionBar>
<StackLayout class='card'>
    <GridLayout class="box" rows="auto" columns="auto, *, auto, auto">
        <Image col="0" src="~/img/icon.png"></Image>
        <Label col="1" class="label-title" text="Title2"></Label>
        <Button col="2" class="fa" (tap)="show()" text="show"></Button>
        <Button col="3" class="fa" (tap)="show()" text="show"></Button>
    </GridLayout>
    <GridLayout>
        <WebView  *ngIf="texto" src="https://www.google.com"></WebView>
    </GridLayout>
</StackLayout>

app.component.ts

import { Component } from "@angular/core";

@Component({
    selector: "my-app",
    templateUrl: "app.component.html",
})
export class AppComponent {
    public counter: number = 16;
    public texto:boolean=false;
    onNextText(){
        this.texto=!this.texto
    }
}

Hope this helps.

[calebeaires]

Work like a charm! Thanks.

[robtoll]

On Android, it automatically sets the height of the WebView according to the content in the WebView.
On iOS, no such luck. You must specify a height otherwise it wont display at all!
Here's a somewhat flakey solution to get iOS to display a WebView with automatic height...
https://stackoverflow.com/questions/52676340/how-to-set-height-of-webview-according-to-the-length-of-content-in-nativescript
Hopefully someone can come up with a much more solid solution for iOS auto-height WebViews.

[muhammadkhafie]

ASHIAAPP....!!!