Question:
How can I have an HTML element that automatically adapt its height based on its content (the snippet of code) and be responsive?
Product:
Wix Editor
What are you trying to achieve:
I am using an external provider for certain activities that the user can click on a book. They provided me a snippet of code that shows these activity cards (the number of these cards may vary). Once I copy and paste the snippet in an HTML element I see that the element it is not responsive (especially in height) adapting and so I see like a scroll bar within the HTML element that is frustrating for users. I would like that this element will automatically adapt its height based on content inside.
What have you already tried:
HTML code
<div data-tiqets-widget="discovery" data-cards-layout="responsive" data-slug-ids="Cards name" data-partner="XXXX" data-tq-campaign="Activities_Adventure"></div><script defer src="SCRIPT.JS"></script>
I just removed the url of JS and other data but this is the code.
Hi, @Alessandro_Loja !!
I’ve tried doing something similar before, but I think it’s generally difficult to achieve. The main reasons are that the height of an iframe (HTML Component) can likely only be adjusted from the outside (not from within the iframe itself), and even if you could control its height, an iframe cannot push down the elements below it. 
When I experimented with this before, the iframe either overlapped the elements below it or got buried underneath them, making it difficult to get it to work properly. If the content inside changes height dynamically, I think it’s better to use a custom element instead of an iframe. 
With a custom element, it is more genuinely embedded within the HTML structure of a Wix site, allowing it to push down the elements below it. While an iframe is also an embedded element, it behaves more like a separate layer floating above the page, rather than integrating directly into the site’s layout. 
To make an HTML element in Wix automatically adjust its height based on its embedded content, you need two things:
- Enable Dynamic Resizing:
In the Wix Editor, select your HTML element and look for an option like “Auto-resize” or “Expand to fit content” in the settings panel. This tells Wix to let the element change its height rather than sticking to a fixed value.
- Communicate the Content Height:
Since the HTML element is an iframe, its content is isolated from your Wix page. You must use the browser’s postMessage API in your embedded code so that the content sends its height to the parent page. On the Wix side, you can listen for that message and then adjust the HTML element’s height accordingly.
Here’s an example approach:
`
`
and this Wix Page Code (in your site’s code panel):
$w.onReady(function() {
// Listen for messages from the HTML component
$w('#html1').onMessage((event) => {
if (event.data.type === 'resize') {
// Update the height of the HTML component based on the received value
$w('#html1').height = event.data.height;
}
});
});
Steps Recap:
Auto-resize Setting: Ensure the Wix HTML element (here assumed as #html1) is set to auto-resize in its settings.
PostMessage Communication: Modify or wrap your external snippet to include a script that calculates the content’s height and sends it to the parent using window.parent.postMessage.
Wix Listener: Use the $w('#html1').onMessage event to catch these messages and set the HTML element’s height property accordingly.
With these changes, the HTML element will automatically adjust its height based on the varying content, eliminating the internal scroll bar and improving the user experience.
javascript
Copy:
Wix Page Code (in your site’s code panel):
javascript
Copy
Wix Page Code (in your site’s code panel):
$w.onReady(function() {
// Listen for messages from the HTML component
$w('#html1').onMessage((event) => {
if (event.data.type === 'resize') {
// Update the height of the HTML component based on the received value
$w('#html1').height = event.data.height;
}
});
});
Steps Recap:
Auto-resize Setting: Ensure the Wix HTML element (here assumed as #html1) is set to auto-resize in its settings.
PostMessage Communication: Modify or wrap your external snippet to include a script that calculates the content’s height and sends it to the parent using window.parent.postMessage.
Wix Listener: Use the $w('#html1').onMessage event to catch these messages and set the HTML element’s height property accordingly.
With these changes, the HTML element will automatically adjust its height based on the varying content, eliminating the internal scroll bar and improving the user experience.
Hi Nadre,
thanks for reply. I tried with the code but it does not work.
The Wix iframe element does not have a height property, so that code is unlikely to work. It is probably a mistaken response from an AI. 