0

<div data-role="page" id="samples">
 <div data-role="header" data-position="fixed"><a href="#ceremony" data-icon="back">Back</a><h1>Ceremony Planner 2.0 - Samples</h1></div>
 <object type="text/html" data="http://www.thereverendmichael.com/ceremony-samples"></object>
</div>

The object scrolls and works fine on all browsers but will not scroll on mobile, it gets cut off and bottom-clipped. Can anyone tell me how I can fix this?

Matthew Walker
  • 193
  • 1
  • 15

1 Answers1

1

Try this:

  • First: Make you sure that you put the viewport inside <head> like <head><meta name=viewport content="width=device-width, initial-scale=1"></head>
  • Use <iframe> instead <object>
  • Add a wrapper to the <iframe>and add the following style

html

<div class="wrap">
    <iframe src="http://www.thereverendmichael.com/ceremony-samples"></iframe>
</div>

css

.wrap {
    // -webkit-overflow-scrolling: touch; Non-standard! 
    overflow-y: scroll;
}

SOURCE: https://www.w3schools.com/cssref/css3_pr_overflow-y.asp

If it doesn't work uncomment the other style although I see the documentation and is not recommended to use it see here.

However here is working: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe you can see the style that applies to #iframewrapper watching the view-source (ctrl+u in your browser) and looking for #iframewrapper

Hope this helped you!

ricopo
  • 455
  • 6
  • 17