search

NativeScript / nativescript-angular

Integrating NativeScript with Angular
http://docs.nativescript.org/angular/tutorial/ng-chapter-0
Apache License 2.0
1.21k stars 241 forks source link

HTMLView with ngIf and <br/> tag renders blank #1314

Open tsonevn opened 6 years ago

tsonevn commented 6 years ago

From @noumaans on May 4, 2018 20:46

Tell us about the problem

If an HTMLView component is used with an *ngIf, it renders blank / empty if the HTML starts with a <br/> tag.

Which platform(s) does your issue occur on?

iOS

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

Please tell us how to recreate the issue in as much detail as possible.

Playground Link: https://play.nativescript.org/?template=play-ng&id=LUVNqq&v=2

NOTE: Remember to make sure the delay is present in ngAfterViewInit - if delay is reduced to 1s, the render starts working again.

Copied from original issue: NativeScript/NativeScript#5783

tsonevn commented 6 years ago

The issue is still reproducible with @next nativescript-angular.

tsonevn commented 6 years ago

Hi @noumaans In our further investigation, we found that the issue is related to a problem with the correct measuring the component dimensions while loading the HtmlView content.

As a workaround, you can set up the component height, and the content will be appropriately displayed.

<HtmlView  [html]="delayedWithBR.html" height="200"></HtmlView>
noumaans commented 6 years ago

@tsonevn that doesn't work when your height requirement is dynamic since one is rendering a large amount of text - in our case inside a scrollview.

GridLayout with auto,* and height=100% workarounds didn't work either... Any help for providing this component a dynamic height would be much appreciated.

tsonevn commented 6 years ago

Hi @noumaans, The current option is to bind the height property and to change its value via code-behind. For example:

<HtmlView backgroundColor="green" *ngIf="delayedWithBR" [height]="hProperty" [html]="delayedWithBR.html"></HtmlView>
noumaans commented 6 years ago

Would this be your recommendation? 1 - set an initial value of height say 100 2 - get device screen size and orientation 3 - perform a calculation in TS to compute the size to allocate to HTMLView 4 - set the height value

Thanks so much for your help. Really appreciate it.

tsonevn commented 6 years ago

Hi @noumaans, Indeed getting the screen height and calculating the component's height is an option. I will also suggest you reviewing the workaround, which I described here for the NativeScript non-Angular projects and check if it will work as well in NS Angular.