Go to rebrand

Iframe Resizer

Component used to resize an iframe at the screen when the window is loaded and automatically update it when the iframe height dynamically changes.

Inspired in https://github.com/davidjbradshaw/iframe-resizer/

How to use

  • Make sure to include and load the file below into your page or project: <script defer src="{{ static("js/ca_styleguide_iframe_resizer.js") }}"></script>
  • Include the .js-resizable-iframe class on the iframe that needs to be dinamically resized. To work properly the iframe needs to have a width(100% as recommended value) and start with the `ca-transp` class. <iframe style="width: 100%" src="icons" class="js-resizable-iframe ca-transp"></iframe>
  • If the iframe that needs to be dinamically resized it's already on the page when the script starts the Iframe Resizer will automatically work.
  • If the iframe that needs to be dinamically resized it's not on the page when the script starts or the iframe url is totally reloaded, you can listen to a custom event com.consumeraffairs.styleguide.iframeResizer that needs to be dispatched. var event = new CustomEvent('com.consumeraffairs.styleguide.iframeResizer'); document.dispatchEvent(event);

Playground




Increase and decrease the iframe height adding a lorem paragraph to it and removing it using the Add and Remove buttons.

Or Change the window size to see the iframe being automatically resized!

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.