CODEWITHSUNDEEP
javascripthtmlcssiframe
user5077994
user5077994

Reputation:

the size of an iframe don't fit the real content

Good afternoon

Is simple, i need the white box height and width fit with the iframe text, how i can do it?

function resizeIframe (iframeContentWidth, iframeContentHeight) {
    var container = window.frameElement.parentElement;
    if (container != parent.document.body) {
        container.style.width = iframeContentWidth + 'px';
        container.style.height = iframeContentHeight + 'px';
    }
    window.frameElement.style.width = iframeContentWidth + 'px';
    window.frameElement.style.height = iframeContentHeight + 'px';
    return;
}
html {
  background-color: #fff
}
div {
  background-color: #000;
display: inline-block;
}
<div>
  <iframe src="http://190.216.202.35/rxp/mobilpxr.php?stopid=502102" height="85px"  width="250px" scrolling="no" frameborder="0">
</div>

Upvotes: 0

Views: 2095

Answers (2)

Teemu
Teemu

Reputation: 23406

At first, it's good to know, how the elements you've used in your HTML work.

Every browser has its own default size for iframes, which is used, if the size is not given by attributes or CSS. Usually the size is nearby 300x200. The body of a document loaded into iframe adapts the width of the iframe it was loaded into, and the height is defined according to the content, if any sizing for the body haven't been defined.

A div element is a block level element, which by default takes a width of 100% of its parent element, and the height depends on the content height. However, this can be changed by setting a CSS property display: inline-block for a div, when the width will be set according to the content of a div.

There's no simple way at client side to detect the size of an arbitrary content to be loaded, before it has been parsed, hence we have to wait that happen. We can wait the iframe to finish loading and parsing on a parent page (= the page containing the iframe), or we can do that in the iframe itself. The latter simplifies referencing, so we'll use it in the following example, i.e. all the following code must be included in the file which is loaded to the iframe.

The body of the iframe:

<div>
    <span class="title">Capri A2</span>
    <br />
    <span class="big">Rutas aquí:  | P17 | E31 | T31 | E21</span>
</div>

Iframe resize in the iframe:

window.onload = function () {
    var bodyWrapper = document.querySelector('div'),
        size;

    // Adapt the size of bodyWrapper to its content. If needed, an absolute size can be set too.
    bodyWrapper.style.display = 'inline-block';

    // Get the size information of bodyWrapper
    size = bodyWrapper.getBoundingClientRect();

    // Set the iframe size
    frameElement.style.width = size.width + 'px';
    frameElement.style.height = size.height + 'px';

    // Done!
    return;
}

Upvotes: 1

CreativePS
CreativePS

Reputation: 1093

Try this, hope it will resolve your issue.

Set iframe "height:auto"

Upvotes: 0

Related Questions