# Prevent scroll in embedded box

**URL:** <https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189>\
**Category:** Custom code\
**Created:** [November 21, 2023, 2:44pm UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189 "2023-11-21T14:44:45Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![nvard](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/nvard/32/129_2.png) [@nvard](https://forum.readymag.com/u/nvard)\
**Post date:** [November 21, 2023, 2:44pm UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189/1 "2023-11-21T14:44:45Z")

</div>

Hi everyone,

I am working on a long read article, and I have several embedded charts. They work nicely in desktop and mobile versions, as I manually did the layout, but when I resize my browser there is an individual scrolling in each box and the charts resize as well. Is there a way to prevent the carts from resizing and keep them in the same proportions as in the main layout? I’ve tried giving a specific height size and auto width, but it doesn’t work.

Here is a link: [Page 3 from ‘Project’](https://readymag.com/nvardyerkanian/4487063/3/)

and here is an example of an embed code

Does anyone had a similar situation and can help with a solution?

Thanks in advance

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [November 22, 2023, 1:52pm UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189/2 "2023-11-22T13:52:39Z")

</div>

I dont know exactly what you want to achieve. This iframe inside iframe implementation looks a bit too complicated. Why not just putting in the charts as images, pngs or maybe svg…?  
Will they be interactive, or why, are they implemented with the custom code widget?

---

<div class="post-metadata">

**Author:** ![nvard](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/nvard/32/129_2.png) [@nvard](https://forum.readymag.com/u/nvard)\
**Post date:** [November 25, 2023, 11:17pm UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189/3 "2023-11-25T23:17:30Z")

</div>

They are animated, otherwise I would use an image format 🙂  
I need them not be responsive I guess. Just resize proportionally when the screen size changes. Now I have all the frames with internal individual scrolling.  
The charts are made with the Flourish app, which allows embedding of the charts.

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [November 26, 2023, 12:03pm UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189/4 "2023-11-26T12:03:23Z")

</div>

I see… Ok first, I would guess, that you have checked the “use iframe” button in the codewidget. What happens if you uncheck it? Because now rm creates an iframe and flourish creates another iframe. That might not be that clean regarding the html structure.

And second: If you have access to the embedingcode of flurish you could adept the “height” of the iframetag from 400px to 240px, and this would then fit inside the RM-widget-container and nothing gets cut, so there is now scrollbar.

 ![iframe size](https://us1.discourse-cdn.com/flex015/uploads/readymag/original/2X/1/165cf4f23209842912ef477ef4630c40be3f4ad0.png)

---

<div class="post-metadata">

**Author:** ![nvard](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/nvard/32/129_2.png) [@nvard](https://forum.readymag.com/u/nvard)\
**Post date:** [November 27, 2023, 1:08pm UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189/5 "2023-11-27T13:08:46Z")

</div>

Thanks a lot.  
Yes, the use iframe is on, when i turn it off it gets worse.

Unfortunately, flourish doesn’t provide the HTML code, just an embed code to copy and paste, so I can’t change much there. I can adjust the size though. I tried different sizes, but again when i am resizing my browser, the charts get resized. I guess it is a good function if you need them to be responsive, but I don’t :))

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [November 27, 2023, 5:44pm UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189/6 "2023-11-27T17:44:30Z")

</div>

ok, would you share the code flourish is giving you?

---

<div class="post-metadata">

**Author:** ![nvard](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/nvard/32/129_2.png) [@nvard](https://forum.readymag.com/u/nvard)\
**Post date:** [November 28, 2023, 12:30pm UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189/7 "2023-11-28T12:30:44Z")

</div>

Of course, here is one of them

\< div class=“flourish-embed flourish-chart” data-src=“visualisation/15781259”\>

---

<div class="post-metadata">

**Author:** ![neueMeta](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.readymag.com/neuemeta/32/92_2.png) [@neueMeta](https://forum.readymag.com/u/neueMeta)\
**Post date:** [November 29, 2023, 7:52am UTC](https://forum.readymag.com/t/prevent-scroll-in-embedded-box/2189/8 "2023-11-29T07:52:34Z")

</div>

ok…

first put this inside the \< head\>

section:

```auto
<script src="https://public.flourish.studio/resources/embed.js"></script>

```

then in a widget code element use this code to embed the chart, and **change the chartnumber.** There are two changes needed!

```auto
<div class="flourish-embed flourish-chart" data-src="visualisation/15781065" style="height:90%;">
  
    <iframe scrolling="no" title="Interactive or visual content" sandbox="allow-same-origin allow-forms allow-scripts allow-downloads allow-popups allow-popups-to-escape-sandbox allow-top-navigation-by-user-activation" style="width: 100%; height: 100%;" src="https://flo.uri.sh/visualisation/15781065/embed" frameborder="0"></iframe><div class="flourish-credit" style="width:100%!important;margin:0 0 4px!important;text-align:right!important;font-family:Helvetica,sans-serif!important;color:#888!important;font-size:11px!important;font-weight:bold!important;font-style:normal!important;-webkit-font-smoothing:antialiased!important;box-shadow:none!important;"></div></div>

```

the chart is now adapting its height to the rm-elements height.