CODEWITHSUNDEEP
javascriptcssiframeiframe-resizer
Sebastian
Sebastian

Reputation: 865

Allow iframe scroll in x-axe for smaller screens with iframe-resizer

I'm using iframe-resizer to adjust the height of my iframe to its content's height. So far is working great, I have only one issue with the witdh. When loaded, it takes the screen width to set the iframe, that's ok for desktop size screen but for mobile I'd like to allow scrolling on the x-axe. Any suggestions?

Here's my iframeresize initialization:

if (document.getElementById('iframe')){
        $('iframe').iFrameResize({
            autoResize: true,
            scrolling: false,
            maxWidth: screen.width,
            sizeWidth: true,
            //widthCalculationMethod: 'taggedElement',
            checkOrigin: [reports_server],
            //log: true
        });
    }

and here's my css:

.iframe-content{
/*  min-width: 800px;
  min-height: 640px;*/
  width: -moz-available;
  width: 100% !important;
  /*height: 100%;*/
  overflow-y: hidden;
}

@media (max-width : 768px) {
  .iframe-content{
      overflow-x: scroll !important;
  }
}

and the html part for the iframe:

<iframe title="myiframe" id="iframe" class="iframe-content" src="mysource" scrolling="no"></iframe>

Upvotes: 0

Views: 556

Answers (1)

David Bradshaw
David Bradshaw

Reputation: 13077

You can set a minwidth in iframe-resizer.

https://github.com/davidjbradshaw/iframe-resizer#minheight--minwidth

Upvotes: 1

Related Questions