How to display an iframe form full length on mobile?

This is an issue for mobile display only. I use iframe to display a contact form in the homepage of my website.

https://hanekudai.com

Currently, for some reason, the iframe doesn’t contain the form in its fullest length so a user should scroll down in the form itself to view the form in its entirety, although I need the form to appear in full length automatically and the user only needs to scroll down in the webpage itself.

How to make the iframe to display the form in its entire length so that there won’t be any need to scroll down the form itself (rather, only the webpage itself)?

I recommend implementing this iframeresizer plugin. I use it at work and it’s quite lovely :slight_smile:

1 Like

A quick (and dirty) fix would be to increase the iframe height with a media query.

e.g.

@media screen and (max-width:733px){
#prcf_iframe{height:547px;}
}

The better fix is the one @RyanReese offered above.:slight_smile:

Just for my understanding. As far as I know using iFrames in general is bad design nowadays or?

In my experience, you iframe out of necessity (importing stuff from an old system, for example), especially if it’s in the same domain as your example.

I thank @RyanReese for sharing the iframe-resizer plugin.
I think that an external plugin would be an “overkill” for my particular need (just one iframe in an all-text website).

@PaulOB showed a nice trick but I have a problem with that trick — it doesn’t fit all smartphones.
on one smartphone it can be a tiny bit too little height and in another smartphone it can be a tiny bit too much height.

Hence, perhaps there is a third way for me to take?

If you don’t want to take Ryan’s advice (which is the smart approach), then unless Paul’s approach is severely adversely affecting a majority of your phone’s, it’s probably the best approach (maybe tweak it so it’s always just a bit too big or just a bit too small, depending on your preference).

You’re not going to get pixel perfection, especially when dealing with mobile. There are far too many variables in play.

@DaveMaxwell Well, I guess with iframes there is no pixel perfection, unless taking the approach @RyanReese suggested.
From my experience can cases of pixel perfectness (or anything near that) when not using an iframe.

I call the form with an iframe just because it’s the only way I know to do that in MediaWiki, but if I would have worked with Drupal, this problem would probably not happen, I wouldn’t need an iframe due to Drupal’s API, block system and entity reference feature.

@RyanReese here is what I have tried to do to use the plugin in my MediaWiki website but failed.

1)

cd WEB_APPLICATION_ROOT 
git clone https://github.com/davidjbradshaw/iframe-resizer

2)

Input the following in MediaWiki:Common.js

mw.loader.load("/iframe-resizer/js/iframeResizer.min.js");
mw.loader.load("/iframe-resizer/js/iframeResizer.contentWindow.min.js");

3)

Calling the iframe this way:

<html>
	<head>
		<script>
			const iframes = iFrameResize( [{options}], [css selector] || [iframe] );
		</script>
	</head>
	<body>
		<iframe src="https://hanekudai.com/pjcrcf/index.php" width="100%" frameBorder="0" id="prcf_iframe"></iframe>
	</body>
</html>

My problem

iframes aren’t automatically resized according to their content and I didn’t find any associated error in browser console.

My question

What have I done wrong?

JS isn’t my thing so I suggest you read the troubleshooting section of that plugin.

I note this in the instructions:

IFrame not resizing

The most common cause of this is not placing the iframeResizer.contentWindow.min.js script inside the iFramed page. If the other page is on a domain outside your control and you can not add JavaScript to that page, then now is the time to give up all hope of ever getting the iFrame to size to the content. As it is impossible to work out the size of the contained page, without using JavaScript on both the parent and child pages.

Also the script tag should likely be at the end of the html and not on the head as the iframe won’t exist when it runs.

Those are just guesses though :slight_smile:

I had a mistake of automatically copying the call pseudocode without trying to change it.

This:

const iframes = iFrameResize( [{options}], [css selector] || [iframe] );

Should be something like:

const iframes = iFrameResize( [], [#myIframe] );

But, I still don’t know what should be there exactly.

By the help of Mark Van Tilburg here I have managed to get the iframe-resizer to work in my website with these code patterns.

Code pattern for any webpage which includes the iframe

<html>
	<body>
		<script src="/iframe-resizer/js/iframeResizer.min.js"></script>
		<iframe id="myIframe" src="https://example.com/contact_form/index.php"></iframe>
		<script>
			const iframes = iFrameResize({ log: true }, '#myIframe');
		</script>
	</body>
</html>

Code pattern that is loaded inside the iframe (index.php)

<!DOCTYPE html>
<html>
	<head>
		<! -- All head code -->
	</head>
	<body>
		<! -- ALL body code PLUS the line below -->
		<script src="/iframe-resizer/js/iframeResizer.contentWindow.min.js"></script>
</html>
2 Likes

Glad you got it working but I did give you more or less the same answer in your other threads :slight_smile:

(I believe that’s why you are failing in your other threads as you are not putting the relevant js into the iframe document itself. It’s a two way process where the iframe document talks to the parent document.)

I guess I should have posted the actual code but I thought the above was enough :slight_smile:

1 Like

I am not a native speaker of English, let along not a native speaker of a Germanic language so I am more prone o cognitive bias with English text, especially if in some context I feel stressed from trying too many things and failing time and again.

That being said, it wasn’t clear to me which threads you meant to exactly but more so, it wasn’t clear to me what is the meaning in the iframe document talk to the parent element.

I try my best :slight_smile:

1 Like

That’s all we ask :slight_smile:

2 Likes