Forum Discussion
Make embedded form full height
Hi there,
I currently use a custom form to track who is completing their eLearning and I use the Embed block in Rise. In "Full-width" display, it works great on a computer, but when on iPad or mobile device, the block only takes up 1/4 of the screen and people are finding it challenging to scroll in such a small block and thus are unable to complete the form.
Is there a way of making the Embed block take up the full height of the device, and not just the full width? Happy to use any coding workarounds or any solutions!
Thanks for your time and help.
Oscar
- hazelBStaff
Hi there!
I understand that you would like your embedded form to take up the full height of the device instead of just the full width. Thanks for sharing the screenshots!
Would you be able to share the embed code that you used so that I can check?
- OscarBrooman-WhCommunity Member
Hi Hazel,
Thanks for your response. The code is copied below:
<iframe src="https://backcountrylearning.com/briefings/ustml/form/form.php"></iframe>
I have experimented with changing the height in the code but I think the limiting factor is the height of the Embed block, rather than the height of the iframe...
Do you have any suggestions?
Thanks,
Oscar- hazelBStaff
Thanks Oscar for sharing your iframe code.
I tried to tweak it a bit:
<iframe src="https://backcountrylearning.com/briefings/ustml/form/form.php" width="100%" height="790px" frameBorder="0" style="border: 0;"></iframe>
I did some testing and the orientation is better in a tablet instead of a mobile phone, where the scroll bar still appears.
I observed that the form in the link is already vertical. When we embed it using iFrame, it is scaled by Rise automatically. So sorry there isn't a way to adjust the height to take up the whole phone screen. Maybe you can play around with the form's width from the original source and see if the appearance will improve.