EverWeb Widgets

Responsive iFrame Overflow Y Scroll

iFrame

The iframe has responsive width, a maximum width setting and a fixed height. The height can be set separately for mobile phones. If viewing this page on a computer, reduce the browser width to see the change.
There is a checkbox to override the maximum width setting if full width is required. There is another checkbox to set the height at 100vh. This allows the item to fill the height of the browser or device window.
The widget has options for inserting any page in the same project using the "Link to:" control or to use a relative or absolute URL to any other page or file.
There are controls for setting the frame background color and padding and to add a border and/or a box shadow. The demo has the background as white with a little padding and a border.
If necessary, a box can be checked to insert some javascript to prevent "white flash" as the frame content loads.
Mobile Devices
iFrame content does not scroll when the page is viewed on a mobile device like an iPad or iPhone. The widget contains code to overcome this problem.
Content
The iframe widget on this page inserts the Responsive Show More Blog Posts widget demo page. Note how the navigation and links can be followed but the linked pages remain in the frame.
Use the Link Info tab below to find out how to get linked pages to break out of the iframe if this is necessary.

© EverWeb Widgets -