I have a separate application (non-glide) that I developed to scrape competition results from a certain website, convert it into one large JSON data object, and then allow me to search and display the json data as formatted html cards for each event/competitor, with various details and scoring tables in each card. In each of the cards, I’ve added buttons to print and export pdf, image, html, and json from that data.
Now I’m trying to determine the best way to bring that data into my glide app. The current method is to take screenshots of the competition results from the competition website and upload the screenshot images into the glide app. Now I’m exploring a better alternative of taking the exported card html from my external application and paste that into the glide app. It would be a lot faster and more efficient than saving and uploading images. I then want to display the html within the glide app.
The rich text component isn’t quite ideal to display my html for various reasons, so I’m leaning towards the web view (iframe) component. It works well and the content displays perfectly, but what I’m not happy with is that my html content extends the width and height of even the ‘Full’ size for the web view iframe. I would prefer that the web view iframe could scale:zoom my html content to fit the current size of iframe window. That way all the details of the competition results are viewable without having to scroll both horizontally and vertically.
Curious if anybody has ever approached something like this. In my external application I’m using the scale:zoom method and a calculated ratio to scale down the content of any card that extends a full printed page during printing so that it always prints the full content on one page instead of page breaking to a second page, so I feel like it should be possible but I’m not sure yet how that might work in relation to an iframe. A solution would have to be able to dynamically scale based on window size.
I haven’t yet tried with the custom AI component to render the html, so I will have to try that as well. Maybe that will be the better solution if I can get it to do what I want.
You’re the expert here so my apologies in advance, but is this something CSS could help with?
(As you can see I don’t know much about CSS.)
I think I might be on to something. I can apply some transform scaling to my html, which dynamically scales the content based on the width of the iframe viewport. Just need to fine tune the numbers and I think I’ll get close enough. Only problem now is that I think the iframe viewport size is determined pre-scaling, so it still has unnecessary scrollbars in some cases. I’ll keep working on it, but I think I have a decent solution. Might still try to combine it with a custom ai component to mimic the web view with a little more flexiblity.
2 Likes
I got it figured out. I created a custom AI component which basically mimics the web view iframe component, but with a little bit of extra code to receive the height of the content from the page that it is showing. This allows the iframe to dynamically change it’s height based on the content height.
I only used two prompts for the custom AI component.
display a datauri but scale the iframe
to adjust it's height automatically to fit
the content based on this listener code
which will receive height from the content.
<script>
window.addEventListener("message", function(event) {
if (event.data.iframeHeight) {
const iframe = document.getElementById("myIframe");
iframe.style.height = event.data.iframeHeight + "px";
}
});
</script>
followed by the following prompt to disable scrolling since it won’t be necessary
no scrolling
Then I wrapped my HTML with the following code. It does two things.
- When the width of the iframe gets below a certain size, it will actually scale the content to make is smaller, so it will still look decent on a smaller screen instead of aggressively wrapping text, pushing tables off screen, etc. The scaling causes text and other items to become smaller. When the screen width increases, it will scale up to normal size.
- The other thing it does is report the height of the scaled content to the iframe viewport so the code for the iframe itself can resize the height of the iframe dynamically.
<div id="scaleWrapper" style="width:100%; overflow:hidden;">
<div id="scaleContent" style="transform-origin: top left; margin: 0 auto; background: white;">
<!-----My dynamic HTML here----->
</div>
</div>
<script>
const wrapper = document.getElementById("scaleWrapper");
const content = document.getElementById("scaleContent");
function sendHeight() {
if (!content) return;
const scaledHeight = content.getBoundingClientRect().height;
window.parent.postMessage(
{ iframeHeight: Math.ceil(scaledHeight) },
"*"
);
}
function updateScale() {
const baseWidth = 700; // Full size design width
const minScale = 0.55;
const maxScale = 1;
const availableWidth = wrapper.clientWidth;
const scale = Math.max(minScale, Math.min(maxScale, availableWidth / baseWidth));
content.style.transform = `scale(${scale})`;
content.style.width = (100 / scale) + "%";
// Send updated height after scaling
sendHeight();
}
// Observe wrapper size changes
new ResizeObserver(updateScale).observe(wrapper);
// Initial update
window.addEventListener("load", updateScale);
window.addEventListener("resize", updateScale);
</script>
The result it this…html content that dynamically scales based on the width of the iframe viewport, and an iframe that dynamically adjusts it’s height based on the html content.
Now instead of uploading screenshot images, which is a pain, my other application will generate html from the json data it created, which I can then copy and paste into the glide app and render it nicely.
3 Likes