Make embedded form full height

Jun 13, 2023

Backcountry Learning
By Backcountry Learning

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

3 Replies
Backcountry Learning
11 months ago06/15/23 at 10:12 am (UTC)

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

Hazel Bartolome
11 months ago06/15/23 at 10:59 pm (UTC)

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.

Sign In to Reply