| Table of Contents |
|---|
Purpose
Cubbles supports the integration of any component into a webpage using the html iframe element (See /wiki/spaces/RTE/pages/19304224 2.4 | The Cubbles IFrame API). Additionally, using the iframe-resizer utility, the Cubbles iframe will resize according to its content. The following sections indicate 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. Lets suppose you want to use a Cubbles iframe to display the "first-demo-component" from the "demo-package@1.0". Thus, you should include an iframe html element as follows (See /wiki/spaces/RTE/pages/193042242.4 | The Cubbles IFrame API):
| Code Block | ||
|---|---|---|
| ||
<html> ... <body> <iframe id="myIframe" src="https://cubbles.world/core/rte@2.23.20/iframe/index.html?webpackage-id=demo-package@1.0&artifact-id=first-demo-component"/> </body> </html> |
Including the iframe-resizer utility
Now you need to include the utility as script within the head of your html page. By the moment it is available at https://cubbles.world/core/cubx.core.rte@2.23.20/iframe-resizer/resize.js. Thus, your code should now look as shown below:
| Code Block | ||
|---|---|---|
| ||
<html> <head> <script src="https://cubbles.world/core/cubx.core.rte@2.23.20/iframe-resizer/resize.js"/> </head> <body> <iframe id="myIframe" src="https://cubbles.world/core/rte@2.23.20/iframe/index.html?webpackage-id=demo-package@1.0&artifact-id=first-demo-component"/> </body> </html> |
Setting the iframe id
Finally 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:
| Code Block | ||
|---|---|---|
| ||
<html> <head> <script src="https://cubbles.world/core/cubx.core.rte@2.23.20/iframe-resizer/resize.js"/> </head> <body> <iframe id="myIframe" src="https://cubbles.world/core/rte@2.23.20/iframe/index.html?iframe-id=myIframe&webpackage-id=demo-package@1.0&artifact-id=first-demo-component"/> </body> </html> |
| Warning |
|---|
Remember that the id of the iframe should be the same as the iframe-id value passed as parameter, otherwise the resizing wouldn't work. |
Now, 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.