How to make an iframe to never collapse?

JavaScript
1

In a website built with the MediaWiki content management system (which its markup I don’t customize) I embed a contact form in a certain webpage, with the following code pattern:

<html>
	<head>
		<script>
			window.addEventListener('DOMContentLoaded', () => {
				const iframeToWorkOn = document.querySelector("#prcf_iframe");
				const paddingedIframeHeight = iframeToWorkOn.clientHeight;
				iframeToWorkOn.height = iframeToWorkOn.contentWindow.document.body.scrollHeight + paddingedIframeHeight;
				iframeToWorkOn.height = parseInt(iframeToWorkOn.height) + 50; // Compensate on some strange 50px scrolling bar leftover
			});
		</script>
	</head>
	<body>
		<iframe src="https://example.com/form/index.php" width="100%" frameBorder="0" id="prcf_iframe"></iframe>
	</body>
</html>

Normally, the contact form doesn’t appear vertically scrollable but I have the problem that seldom it does (in about one to twenty cases), then the user has to scroll down to complete filling the form.

I failed to diagnose what causes the contact form to seldom collapse and require the user to vertically scroll down, so I seek an opinion about what may cause it.
I believe that the JavaScript approach I took to ensure that the form would always be uncollapsed (for lack of a better term) is just wrong.

1 Like
2

When you receive a report that they are seeing the scrollbar, is it on a particular device type like a mobile phone? Is it a particular browser? Are you able to recreate it?

It may be simply a resolution thing. You seem to be working in pixels, have you tried adjusting height in something like em and rem? What happens when you simply set the height to fixed value instead of calculated height?

My assumption here is that you are simply experiencing a resolution issue and since you are dealing with fixed pixels, you are running into situations where a device’s pixel size for its resolution is not large enough and so causes the scroll window. But that is just a guess.

If you are able to reliably recreate the issue on a device of yours and then change over to resolution based size dimensions, you can find the size that will work for all devices and resolutions.

Give some of that a try and let us know how it goes. :slight_smile:

1 Like
3

Hello, Martyr2

:hugs:

When you receive a report that they are seeing the scrollbar, is it on a particular device type like a mobile phone? Is it a particular browser? Are you able to recreate it?

  • This problem happens in desktop display
  • I think that the problem happened only in Chrome
  • I don’t know of any way to recreate the issue non-randomly; furthermore, something interesting is that browser window zooming in or out (greater than 100% or lesser than 100%) didn’t help recreating the problem

It may be simply a resolution thing. You seem to be working in pixels, have you tried adjusting height in something like em and rem ? What happens when you simply set the height to fixed value instead of calculated height?

  • I didn’t try em or rem in that case
  • After reading your reply I tried adding height="100%" but the problem persists; in Chrome, the problem occurred 5 times from about 100 webpage loads (about 95 times the contact form appeared uncollapsed and 5 times collapsed).
    Interestingly, I didn’t experience this “random reproduce” in Edge (with also around 100 loads)

A probably associated problem in mobile display

In mobile display, the form has just one column (instead several columns as in desktop display).
In mobile display, scrolling is still required (also now after setting global height="100%"), although I just want the form to never require scrolling from anyone, in mobile or desktop.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.