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’
and here is an example of an embed code
Does anyone had a similar situation and can help with a solution?
Thanks in advance
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?
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.
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.
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 :))
ok, would you share the code flourish is giving you?
Of course, here is one of them
< div class=“flourish-embed flourish-chart” data-src=“visualisation/15781259”>
first put this inside the < head>
then in a widget code element use this code to embed the chart, and change the chartnumber. There are two changes needed!
<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.