Forum | Appery.io

I have tried using the iframe to embed an external page in my app, but have not been successful. In all the ways you've tried the page appears, but occupies a small piece of the visible area of ​​the app.

My goal is that the page fills the space of the app, keeping the header and footer. Is that possible?

Hi Alexandre,

Here is a solution for you:

1 Open HTML component properties.

2 Set dimensions: as "auto" and "auto". http://prntscr.com/4wlwvb/direct

3 Set for this HTML component "Class Name" property as "fullScreen" http://prntscr.com/4wlwpp/direct

4 Create new CSS. And fill it by following code:

pre

.fullScreen{
position: absolute;
left: 0px;
right: 0px;
/* you need to adjust it for header /
top: 54px;
/ you need to adjust it for footer */
bottom: 54px;
width: auto;
height: auto;
}

/pre

5 Click "Edit HTML" for this HTML component and fill it with following code: http://prntscr.com/4wlxir/direct

pre

<iframe src="http:&#47;&#47;appery&#46;io" width="100%" height="100%"</iframe

/pre

That's all.

Regards.

Thanks for the reply!

There remained only one question, the name of the CSS (item 4) can anyone?

once again thank you.

Hi Alexandre,

Please use any name that is set in step 3.

Hi,

I followed the instructions to make a fullpage iframe, however there was a problem: the iframe appeared with two scrolls, both vertically and horizontally in the (image attached). I tried to adjust the height of the header and footer in CSS, but it did not work. What's wrong?

Thank you

Hi Alexandre,

Please try this code instead of given above:

pre

&#46;fullScreen{
position: absolute;
left: 0px;
right: 0px;
/* you need to adjust it for header /
top: 54px;
/ you need to adjust it for footer */
bottom: 54px;
width: auto;
height: auto;
overflow: hidden !important;
}

/pre

If it does not solve your problem please give us your app public link and we will take a look.

Regards.