# The Cubbles IFrame Resizer API

## Purpose

Cubbles supports the integration of any component into a webpage using the html **iframe** element (See [The Cubbles IFrame API](https://cubbles.gitbook.io/docs/runtime-extension-rte/user-guide/cubbles-iframe-api)). However, the iframe will not bet automatically resized to adjust its content, and you may not always be sure of the final size of the iframe.

In that case, you can use the `iframe-resizer` utility to enable the Cubbles `iframe` to resize according to its content. The following sections show how to use the `iframe-resizer` utility to automatically resize a Cubbles iframe.

## Use

If you want the Cubbles `iframe` to be resized automatically according to its content size; you can use the `iframe-resizer` utility. Let's suppose you want to use a Cubbles `iframe` to display the *cubx-maps-demo* from the *<cubx-maps@1.0.0-SNAPSHOT>*, you should include an *iframe* html element as follows (See [The Cubbles IFrame API](https://cubbles.gitbook.io/docs/runtime-extension-rte/user-guide/cubbles-iframe-api)):

```markup
<html>
...
<body>
  <iframe id="myIframe" src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe/index.html?webpackage-id=my-first-webpackage@0.1.0-SNAPSHOT&amp;artifact-id=currency-viewer"></iframe>
</body>
</html>
```

### Including the iframe-resizer utility

Now you need to include the utility as a script within the head of your html page. By the moment it is available at <https://cubbles.world/core/cubx.core.rte@3.0.0-SNAPSHOT/iframe-resizer/resize.js>. Your code should now look as follows:

```markup
<html>
<head>
   <script src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe-resizer/resize.js"></script>
</head>
<body>
  <iframe id="myIframe" src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe/index.html?webpackage-id=my-first-webpackage@0.1.0-SNAPSHOT&amp;artifact-id=currency-viewer"></iframe>
</body>
</html>
```

### Setting the iframe id

Finally you should:

1. make sure the *id* attribute of your iframe is set and
2. pass it to the Cubbles iframe using `iframe-id` parameter in the src url:

```markup
<html>
<head>
   <script src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe-resizer/resize.js"></script>
</head>
<body>
  <iframe id="myIframe" src="https://cubbles.world/sandbox/cubx.core.rte@3.0.0-SNAPSHOT/iframe/index.html?iframe-id=myIframe&amp;webpackage-id=my-first-webpackage@0.1.0-SNAPSHOT&amp;artifact-id=currency-viewer"></iframe>
</body>
</html>
```

> Remember that the *id* of the iframe should be the same as the *iframe-id* value passed as a parameter, otherwise the resizing wouldn't work.

## Result

The *width* of the iframe will be set to 100%. The *height* will be set according to the body content of the iframe whenever it changes as shown below.

![RTE iframe Resizer Demo](https://783451574-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LFauslHG_3YIQtbtVZG%2F-LSQVFAAD_K5lvnWei0I%2F-LSQVFpkcDAycU2Q2huL%2Fiframe-resize.png?generation=1543428444490146\&alt=media)

Check [this demo](https://cubbles.world/sandbox/my-first-webpackage@0.1.0-SNAPSHOT/rte-iframe-demo/resizer.html) to see the result running online.
