Styling embedded iFrame

Ask for Help
1

We’ve embedded our Grist “score board” page in a static HTML page via an iFrame, and that page is served via a Raspberry Pi on the back of a large TV in the clubhouse. It works well (the dark mode in particular) but I wonder if I can reach into the iFrame with CSS / JS and make the text a little bigger?

We’ve tried using iframe.contentDocument to create an additional element and setting the text size that way but it’s an ugly hack which doesn’t work. Even uglier would be to use a scaled display resolution on the Pi, but hopefully there’s an easier way.

2

Sounds neat! Jealous of your clubhouse. Hmm you can’t do much on an iframe these days. Would a global scaling of the surrounding page with something like transform: scale(1.5); suffice? Sounds like maybe, given that you’d consider scaling display resolution.

3

if I was going to do it, I would create the scoreboard as an HTML. So the text would be any size you want.

4

Thanks for the scaling suggestion @paul-grist I hadn’t considered that. On my first attempt it made the iFrame contents bigger but also enlarged it past the viewport bounds, probably because the iFrame was styled to fill the viewport in the first place. After fiddling with it for a while I was able to shrink the iFrame and then scale it up to sort of fill the screen (our scoreboard is portrait orientation, my dev machine isn’t) but it’s still quite fuzzy. Will play with that some more …

	<style>
		body{
			margin: 0;
		}
		
		iframe{      
			display: block;
			height: 85vh;
			width: 75vw;
			border: none;
			transform: scale(1.4);
			margin: auto;
		}
	</style>

Thanks also to @Rogerio_Penna for suggesting I use HTML. That’s how we do it right now: the kiosk RPi refreshes a WordPress page every 10 seconds containing the latest “scores” post type. That part works well, the part where various Excel people have to navigate the WordPress system works less well. (#1)

Grist is a great tool which bridges the frustrating gap between DB functionality and non-technical users, so there must be a way of pulling out and formatting data. I had a quick look at the API but that seems to be there for manipulating pages / documents rather than pulling data from specific tables.

Or maybe a web hook is the way forward? Each time a new score is entered into our system I could push the data to a custom object in WordPress and pull it out for rendering on the scoreboard, but that seems like an awful lot of work just to replace the dirty whiteboard we historically used in our clubhouse.

Might be a shiny new use case for you @paul-grist? :wink:

Cheers - Mark

(#1) unrelated rant-fodder: most modern OS can copy an Excel table into WordPress and it’s still a table, only Windows treats grid lines as optional cruft. Grrr …

5

Did you see the /records endpoint?

Here for example is the content of a table in one of our templates:
https://templates.getgrist.com/api/docs/viyGsuqvNF1D/tables/All_Deals/records

6

Not sure how I missed that (my bad!!) but it looks to be exactly what I need. Thanks Paul!