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)?
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.
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.
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>
Glad you got it working but I did give you more or less the same answer in your other threads
(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
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.
