Full page iFrame?

Support
#1

Hi there, I am looking for a way to display an iframe full page. Any tips on how to do this?

I am creating an interative worldmap (HTML5) and wish to display this full screen on the homepage. I want to use X Theme for the rest of the pages of the website.

Currenly I am testing on [the Secure Note], but I will eventually create a new domain for this. The test page has an iFrame that doesn’t quite seem to go full page…

Thanks in advance!

#2

Hi There,

Thank you for writing in, have you try the Blank - No Container | No Header, No Footer page template? This template is literally blank.

To do this, on your page’s Settings panel see the Page Template option (https://prnt.sc/g47pn5)

Then you can paste your iFrame code in a Map Embed element.

Cheers!

#3

Thanks for the reply, I have used the Map embed element and this seems to work!

Final question, there is a small scrollbar on the right side, I think because there is some white space below the iFrame.
I believe this is because of the column or row… which class should I add to remove this?
EDIT: Found it! mbn :slight_smile:

Another question: Is there a way to get a full screen iframe on mobile? it’s only full width now?
see http://rotsoord3.nl/nrg/

Thanks in advance!

#4

Hi There,

Please also add this custom CSS:

.page-id-148 .x-map-inner {
    height: 100vh;
}
1 Like
#5

It worked! Thanks @thai! <3

#6

Glad it worked.

Cheers!

#7

Very good service again guys, will buy two more licenses next week! :slight_smile:

1 Like
#8

Thank you for your support and nice words :slight_smile:

Cheers!

1 Like
#9

Hi Thai,

The height: 100vh seems to be giving some problems on iOS devices (iPhone). Is there a workaround for this?
If you look at my homepage at [edited] on an iPhone the picture doesn’t show correctly like on an Android phone…

Any ideas how to fix this? Thanks!

#10

Hi again,

Can you try using the following code instead:

#platform-kaart {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Let us know how this goes!

#11

Hi Nabeel,

Thanks for the quick reply. I tried it but it still doesn’t work.
See the screenshot here: http://i.imgur.com/OlpaeR5.jpg

I think I have too much CSS now?:

/* Homepage kaart fullpage */
.page-id-55 .x-map-inner {
    height: 100vh;
}

/* Kaart hoogte en breedte */
#platform-kaart {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.homepage-iframe .x-map-inner {
    padding-bottom: 0px !important;
}

Any suggestions?

#12

Hi there,

It’s because of the appearing and disappearing address bar and bottom utility bar. Unfortunately, it can’t remove or control through CSS.

I think it’s best if you do it in javascript using setInterval() and get the viewport height and apply it to .page-id-148 .x-map-inner. This means it will get the proper height whether there is an address bar or not.

Example,

jQuery( document ).ready( function($) {

setInterval ( function () {

$('.page-id-148 .x-map-inner').css( { height : $(window).height() } );

} , 300 );

} );

Please add that to your global custom javascript.

Thanks!

#13

Thank you.

#14

Thanks, but I don’t see the pencil? Only on new posts?

#15

Done. It seems that I as a support staff have the level to edit the post. Thank you.