Alexandre
Posts: 0
Joined: Wed Oct 15, 2014 9:41 pm

IFRAME to get external page

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?

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

IFRAME to get external page

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.

Alexandre
Posts: 0
Joined: Wed Oct 15, 2014 9:41 pm

IFRAME to get external page

Thanks for the reply!

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

once again thank you.

Kateryna Grynko
Posts: 0
Joined: Thu Nov 15, 2012 9:13 am

IFRAME to get external page

Hi Alexandre,

Please use any name that is set in step 3.

Alexandre
Posts: 0
Joined: Wed Oct 15, 2014 9:41 pm

IFRAME to get external page

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 Image

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

IFRAME to get external page

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.

Return to “Issues”