Bug with iframe responsive

[lea]

Thanks to this post with @dcoletta and this post with @Suzie I discovered the functionality of inserting code from airtable in a list block of softr. This is truly an exceptional feature, opening up many possibilities for me.

But when I deploy it, I realize that the responsive does not work well.

I tried several things:

• the basic code, by modifying the width= parameter towards auto or 100% or 30%
• the code with a div tag (see below) with the src="https://cdnjs.cloudflare. script in the airtable or in the header

But anyway, I can’t, you can see it on this screenshot with the red lines that frame the Inbox block which are not aligned with the purple lines from Text field with the script in the center.

(sorry for the blurring but the data is not public)

Code with div which I quote above

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.min.js"></script>
<div class="softr-embed-container">
    <iframe id="softr-IDOFTHEPAGE-list1" src="https://MYRUL.softr.app/embed/pages/IDOFTHEPAGE/blocks/list1?filter-by-ID=2" width="100%" height="1000" scrolling="no" frameborder="0" style="border:none;"></iframe>
    <script> iFrameResize({ checkOrigin: false, log: true }, '#softr-008a06eb-1ad1-4c75-84a4-2f29180e561f-list1');</script>
</div>

Someone would have any idea ? This is probably an obvious solution

Thank you dear community

[dcoletta]

You already tried the things I would have suggested. But it does seem like the underlying issue is that the iframe is too narrow.

When you inspect it in the browser’s developer tools, can you confirm that the iframe’s width is too narrow?

[lea]

I’m not an expert in inspecting chrome elements but I see this, any idea?

[dcoletta]

Thanks. I think I will try to set this up myself and see if I can reproduce your problem.

[lea]

Without knowing the responsive web but by logic I would say that it would be necessary to extract the width of this box and make it match with that of the block, right? Maybe there is a solution with a script? Very dark for me all this

[lea]

@dcoletta @artur @Suzie first of all here is a softr test page (and the airtable cuisine list) that I generated to debug my website (this is a copy of how my other site works, without the sensitive data in it).

For this bug, I believe it comes from a div tag imposed by the softr code just above. Indeed I tried a modification of the width of my iframe by a javascript code with the onload tag, but also a modification a posteriori. Anyway I can never get the CSS to match.

Here are some code examples, I really thought I could do it with these different options… these codes are injected by airtable so you can find them in the database link above in the code injection field

Burger cuisine in softr app

<div>
  <iframe id="softr-319a5452-5f4b-4be4-b971-3172ae448f3d-list1" src="https://kEZE2c8fByZenMdS8wzSXau8KWmaw4BoLeLEF5y7tETsn3YRZ.softr.app/embed/pages/319a5452-5f4b-4be4-b971-3172ae448f3d/blocks/list1?filter-by-NameCuisine=American" width="900" height="1000" scrolling="no" frameborder="0" onload='javascript:(setIframeWidth(););' style="border:none;"></iframe>
</div>
<script>
function setIframeWidth() {
  var divWidth = document.getElementById('css-14fxakp').clientWidth;
  document.getElementById('softr-319a5452-5f4b-4be4-b971-3172ae448f3d-list1').style.width = divWidth ;
}

window.addEventListener('load', function() {
  setTimeout(setIframeWidth, 3600);
});
window.addEventListener('resize', setIframeWidth);
</script>

Chinese cuisine in softr app

<iframe id="softr-319a5452-5f4b-4be4-b971-3172ae448f3d-list1" src="https://kEZE2c8fByZenMdS8wzSXau8KWmaw4BoLeLEF5y7tETsn3YRZ.softr.app/embed/pages/319a5452-5f4b-4be4-b971-3172ae448f3d/blocks/list1?filter-by-NameCuisine=American"  
height="1000" scrolling="no" frameborder="0" 
onload='javascript:(function(o){o.style.width=document.getElementById("css-bns4tv").clientWidth+"px";});' 
style="border:none;"></iframe>

I’m pretty sure there’s a solution, but I’m stuck.

[artur]

I would suggest defining few const options like desktopWidth = ‘900px’, tabletWidth = ‘600px’ and mobileWidth … and then based on window.innerWidth set the iframe width to either desktopWidth, tabletWidth or mobileWidth. You don’t need the parent divs

[lea]

Do you think it will be clean for the user to have only 3 webresponsive positions? if my clients are on a 4k screen, it’s going to be weird, right? according to you @artur, the parent div parameters are not useful or they are not accessible? Thanks

[artur]

My point is to base this on entire window and not parent div. 3 sizes were just examples feel free to apply custom logic too

[lea]

I still haven’t solved this problem despite your suggestions @artur, I don’t understand why the size always ends up being 300px. Out of curiosity I asked chatGPT, he suggested me to check if a React component was not disturbing my javascript functions, but I don’t know if it makes sense on Softr.

Anyway, in order to facilitate the debug, I made screenshots of the codes that I inject by airtable and associated comments with the hypotheses tested, all of this is available on the same softr web page available here

I’m sure one of your brilliant brains can figure it out, I’m totally stuck.

[Suzie]

Hey @lea,

I will have a look at this issue with one of our engineers tomorrow and will give an update

[lea]

Thank you very much Suzie

[Suzie]

Hey @lea,

Please change the iframe width from 900 to 100% and apply this custom style. Add it to the Page Settings > Custom Code > Header area.

<style>
.css-1qw4ra5 {
	width: 100%!important;
}
</style>

Keeping fingers crossed

[lea]

Hey @Suzie

I added this code to header

And added this code to the Italian cuisine record

<iframe id="softr-319a5452-5f4b-4be4-b971-3172ae448f3d-list1" src="https://kEZE2c8fByZenMdS8wzSXau8KWmaw4BoLeLEF5y7tETsn3YRZ.softr.app/embed/pages/319a5452-5f4b-4be4-b971-3172ae448f3d/blocks/list1?filter-by-NameCuisine=American" width="100%" height="1000" scrolling="no" frameborder="0" style="border:none;"></iframe>

And it seems to work well !! Thanks a lot to you and engineers

Can you explain to us why it works like that? Is this a concept to keep in mind to debug other blocks later?

[Suzie]

Hey @lea,

So glad to hear it works. Will share with you the details a bit later if you do not mind

[lea]

Yes thanks @Suzie I think it is necessary for me and for the community.

About me, I am in a test environment on the restaurant / kitchen application I shared, and I would like to be able to replicate all of this with confidence in my original application

EDIT : just tried the exact same code on my other website and it’s working well

[lea]

I tried to replicate the UX “google-like” that @Suzie coded here for my embed list, it seems to work well for the page here but not working here

Any idea to make it works ?

[Suzie]

Hey @lea,

Will make sure to check this, sorry did not manage to post earlier. I will keep you posted once I have an update.

[Suzie]

Hey @lea,

Just checked the URL, it seems to be working. Did I miss something?

[lea]

thank you @Suzie for coming back to me, not really functional because the embed part in the iframe always has the results directly displayed, so the script injected into the other page does not work when we embed the page