Forum | Appery.io

On my start screen I have an image which when clicked goes to page2 which has an HTML area in the page. I have set the 'edit html' in the properties panel to

I have also set the dimensions of the html area to 100% 100% in the properties area.
On page load I have $("[name=blog]").attr("src", "http://m.f1blogger.co.uk/index.html"); set and this load the web page into the iframe.

The problem is when I install the app on my phone and click to page2 the html page in the iframe doesnt show the bottom of the page. However, when I go back to the first screen and click back to page2 for the 2nd time the web page shows correctly in the iframe?!
Is this a bug or is there a problem with the initial load?!

Thanks for your help.

Kind regards

Hello,

What is the component with name "blog"? Is it iframe?

Hi

Apologies I had changed it.

The iframe is set to in the edit html area.

The html component is called blog and class name of blog.

The on page load I have $("[name=blog_frame]").attr("src", "http://m.f1blogger.co.uk/index.html"); set and this load the web page into the iframe.

Thanks for your help on this.

Hi,

The matter is that the html-component doesn't have attribute src, and this isn't right to add this attribute to it. If you've added in the html-component iframe, then you should add to it id="myid", for example, and after that add src by this id. For example, like this:
$("#myid").attr("src", "http://m.f1blogger.co.uk/index.html");

Im not sure I understand as I have just tried that and nothing loads into the iframe.

The key thing is that the process I use works perfectly on the 2nd time I go to the page but not the 1st time.
So i open the app to page 1, click image to go to page2, webpage loads in iframe but misses some of the bottom. Click back to page1, then go to page 2, all is working correctly.

This means that $("[name=blog_frame]").attr("src", "http://m.f1blogger.co.uk/index.html"); is correct but it is just not opening the page on the 1st go.

I have this exact same code for another html iframe and this doesnt have the same problem?

Thank you.
Mark.

What size of your html-component is? Is it stretched to whole screen?

Hi Nikita

html is set to 100%. This is what I have so far...

Page is alled blog_page with an html component named blog with a class name as blog. Set to 100%

iframe set as this within the edit html property:

While installed on my mobile on first opening I get this:

On 2nd opening it works correctly and I get this (you can see where the 1st time ended at the 'red' word)

This is why I thought it was a bug as I can't understand why it would notload 1st time and yet 2nd time is ok?!

Thank you for your continued help.

Mark.

Hi,

If you need just to display some http page in iframe, try to set src attribute directly in your html code:

Using nex code you can make sure that you are using correct iframe element
pre
console.log($("[name=blog_frame]"));
/pre
If it will not help please send us app public link and steps how to reproduce this.

I have tried adding the code directly into the iframe and this still produces the same problem.
I have shared with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a

To replicate the problem:

1. export the android app.

2. Install on mobile phone.

3. Open app

4. Click blog image

5. Scroll down to the bottom of the page and this will end with the word Red.

6. Press back button.

7. Press blog image

8. Scroll down to the bottom of the page, you will now see the whole page ending with markwiseservices.co.uk footer.

   Thank you
   Mark.

Hi Mark -

Problem is in using height: 100% cause of 100% calculated on document size.

Please use position: absolute instead;

We have fixed your application and backup is in file:https://db.tt/eSQEDxzr -- please take a look on solution to figure it out.