CODEWITHSUNDEEP
javascripthtmlcssresizeiframe-resizer
Zoroaster
Zoroaster

Reputation: 63

Apply overflow:auto on iframe's wrapper with CSS resize

When I add overflow: auto on the parent element of the IFrame required by CSS resize: both, then iframe-resizer doesn't resize the IFrame but shows a scroll bar instead.

How should I solve this?

iFrameResize({
  log: true,
});
div {
    resize: both;
    overflow: auto;
    max-width: 100%;
    min-width: 575px;
}

iframe {
  width: 100%;
  overflow: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.2/iframeResizer.min.js"></script>

<div>
<iframe src="https://iframe-resizer.com/"></iframe>
</div>

Upvotes: 0

Views: 390

Answers (2)

Zoroaster
Zoroaster

Reputation: 63

Seem the issue was caused by utility class of bootstrap which use !important so by using normal CSS it works fine.

My code was:

<div class="overflow-auto">
  <iframe src="..."></iframe>
</div>

By adding style overflow: auto without !important it work fine.

Height 100% or not it works.

Upvotes: 0

Farshad Vaghari
Farshad Vaghari

Reputation: 161

Add height to iframe:

iframe {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }

Upvotes: 0

Related Questions