HTML element takes over my entire page when embedding Google Trends

Ask us anything
1

Please assist, when I embed the Google trends code into Weweb -

image
image1112×811 56.9 KB

The display takes over my screen and all my other elements disappear, including the sidemenu. What am I doing wrong?

image
image1907×656 88.3 KB

2

Hi @lebom326 :wave:

Can you try wrapping the HTML with a container div and set its height and width? Like <div style="width: 100%; max-width: 800px;>

3

Hi, thank you for the feedback. I tried wrapping the HTML element in a container div but, there is no use.

image
image1892×586 78.9 KB

4

sorry I meant wrapping the <script> tag with a div in the HTML element directly, not adding a flexbox. Something like:

 <div style="width: 100%; max-width: 800px; height: 400px; position: relative; overflow: hidden;">
    <script type="text/javascript" src="https://ssl.gstatic.com/trends_nrtr/3940_RC01/embed_loader.js"></script>
    <script type="text/javascript">
        trends.embed.renderExploreWidget("TIMESERIES", {"comparisonItem":[{"keyword":"seo","geo":"","time":"today 5-y"}]});
    </script>
</div>
5

Thanks, but same results:

image
image1893×512 74.6 KB

6

Can you try wrapping within an iframe? It works for me

<div style="width: 500px; height: 400px;">
    <iframe 
        style="width: 100%; height: 100%;"
        src="https://trends.google.com/trends/embed/explore/TIMESERIES?
        ...
    </iframe>
</div>