Article layout logic


#1

Hello,

I am kinda confused about combination of native elements with webview.

My task is create article detail page.
And it should look like example picture.

Problem you can see on this video. You will see, that using this looks pretty bad.
https://youtu.be/4kuLXHnB1Bc

There is playground example: https://play.nativescript.org/?template=play-ng&id=QUj1f0

Problem is scrolling in webview. Solution could be WebView which has the same height as website content, but on each page content should have different sizes.

I really don’t know how to solve it most elegant way.

Thanks for any suggestion


#2

Use nativescript-webview-interface plugin to find the height of the web page once it’s loaded.


#3

It finds height by default or I must create some function for it? I think that this can’t work, because in nativescript size isn’t in pixels.


#4

Basically it allows you to execute javascript code inside web page context using which you can get the height of the webpage. I haven’t had a chance to personally use it but that’s the idea, should solve your problem.


#5

I found some simple solution for React Native. Is some way how to simple do it in NativeScript?


#6

@b4rtt In that example you are showing, they seem have control over the html content / website they are going to load and just setting the height of the web page to it’s document title then simply read the title (which will be the height) once page is loaded.

If you too have control over the site / html content you are loading, you can do something similar. Calculate the height and update the url to something like http://example.com/index.html#{height} and you can read that url from NativeScript loadFinished event.


#7

Yep I thought that it could works like this. But I have no idea how to do it.