Embedded Google Drive content extend outside own container on iOS Devices

Question

I'm using MaterializeCss. I've a collapsible <ul> element that contains some <iframe> that allow users to access folders of an Google Drive account. I've inserted an example collapsible element here, that points to an empty folder. I can test my project on a Nokia Lumia, a Samsung device with Android, iPad 3, iPad 2, iPhone 6 (and desktop of course).

The Css rule .gDrive-page {width:100%} works well and iframe suits to the container width. This works fine on desktop (IE,Firefox,Opera,Chrome), on Nokia Lumia and Samsung Device, but, on iOS Devices it extends outside own container.

I don't understand why it hasn't displayed correctly.

.gDrive-page{
  width: 100%;
  height: 100%;
 }
.collapsible-body{
   height: 400px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
     <div class="col s12">
       <ul class="collapsible">
          <li>
           <div class="collapsible-header">Regolamento e Varie</div>
           <div class="collapsible-body"> 
            <iframe class="gDrive-page" src="//drive.google.com/embeddedfolderview?id=0B-4aXfTpOgrOSERiVmdXczY3OWM&usp=sharing#list"></iframe>
            </div>
          </li>
       </ul>
  </div>
</div>

Screenshoot

Guille · Accepted Answer · 2015-12-21T00:44:41.613

0

It appears that file you are trying to display may not be available for public display. if you try going to the link by pasting in the URL you will notice it shows you nothing.

I added my own file from google drive and it shows.. So all you have to do is get the proper link for your file from google drive.

EDIT But in case you don't want your iframe to go over the 400px you have defined, then just add a overflow-y: hidden.

.gDrive-page{
  width: 100%;
  height: 100%;
  overflow-y: hidden; /*Added this line*/
 }
.collapsible-body{
   height: 400px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row">
     <div class="col s12">
       <ul class="collapsible">
          <li>
           <div class="collapsible-header">Regolamento e Varie</div>
           <div class="collapsible-body"> 
              <iframe class="gDrive-page" src="https://drive.google.com/file/d/0B9zfU_nDqD_IOUxyVktlSHRWc1k/preview"></iframe>
            </div>
          </li>
       </ul>
  </div>

edited Dec 21 '15 at 00:44

answered Dec 20 '15 at 23:55

Guille

652
1
5
19

I know, I intentionally put a reference to an empty folder. My problem is not about file sharing, but the display of the same – Wonderman Dec 21 '15 at 00:18
With the code i provided, the page seems to scale correctly in all the devices i tested. – Guille Dec 21 '15 at 00:35
Now I updated the iFrame content and is just how I see it in my site (pdf list). By testing this on my iOS devices, the table goes out of the box, you may check if it happens to you, please? I think the problem is the table.. – Wonderman Dec 21 '15 at 10:04
Can you post an screen shot? – Guille Dec 21 '15 at 11:04
I've added screenshot, hosted by Imgur – Wonderman Dec 21 '15 at 11:33
I see what the issue is.. i think that the parent container of this Iframe has to have its width or height defined. And as long check any margin in your css that could be making your Iframe parent over flow.. also try setting this Iframe or parent as 'position: relative' that might help.. if not I will need to see all your code.. if you have a website running just give me a link to it and I'll check – Guille Dec 21 '15 at 15:18
I restarted work on this project and I found a way to solve this problem:[This stackoverflow answer](http://stackoverflow.com/questions/16937070/iframe-size-with-css-on-ios) – Wonderman Jan 19 '16 at 00:21
Good then set this question as answered, so it gets closed – Guille Jan 19 '16 at 00:24

Embedded Google Drive content extend outside own container on iOS Devices

1 Answers1