Keep iframe contents fixed when resizing browser

Anvil Q&A
1

Hi all,

I’m making a data visualisation game where users have to match code snippets to corresponding grammar and charts.

I’m presenting material in iframes. When I resize my web browser, the contents of the iframe shift around.

All of the content that gets piped into the iframes comes from a single html file. Buttons cycle through the html tags (<a id="code_snippet_1"></a>) to control which snippet is being shown.

Is there a way to keep the iframe anchored on the html tag, despite resizing the browser?

Here is an example of the issue and a clone of a simplified app.

Clone:
https://anvil.works/build#clone:UZLHEZA6SLU2VUZI=HKU4UJXLFHXMZC5FZEDSV5M5

2

Hi @alcampopiano

Have you tried using @david.wylie’s page resize event to re-scroll the iframe to the current cell?

His custom HTML snippet causes a python method named page_resize_event to be called when the page is resized.

1 Like
3

Well thank God for David Wylie! The JS (and how it interacts with the python method) seems like pure magic to me. It works perfectly!!

When I resize the page, the method that gets triggers just resets the HTML contents back to the tag’s position. You can see a slight delay (exposing some unintended HTML), but I can live with that.

com-video-to-gif%20(6)

Thanks @shaun and @david.wylie

clone:
https://anvil.works/build#clone:UZLHEZA6SLU2VUZI=HKU4UJXLFHXMZC5FZEDSV5M5

1 Like
4

My older sister wanted a sausage dog instead of me …

4 Likes
5

This should be the accepted answer.

1 Like