Embedded bubble app in iframe not responsive

I’m Not saying its a bug but I embed my bubble app as an iframe. This was all working until today now it’s embedded fine but shows as if it’s a desktop and not responsive. Tested on various browsers on iOS and it acts like a fixed width . Just asking if anyone else is seeing the same if they embed

That’s because the iframe content doesn’t have access to the screen size.

Did you want the bubble app to be responsive by treating the iframe box dimensions as screen size?

Hi @mishav, yes. I presumed I did by default because up until yesterday it it seemed to do just that. I’m running a third party domain ( stardard web hosting stack) which I control … for various reasons it’s .php
90% of the front end is served from bubble as a data source … one element needs to be iframed. I have a bubble app which acts as the parent serving the iframe this is connected via the app connector to my main app. The only reason for me providing the context is to convey my scenario and explain I’m serving the iframe to my own site not giving customers the ability to iframe my app if helps … so if there is a workaround I’d be fascinated to know

Hi @Bubbleboy, I just tried it, and got the responsive setting to work …

What do you have in the iframe tag?

html, body { margin: 0; padding: 0; height: 100%; width: 100%; text-align: center; }
    h1 {
        margin: 0;
        padding: 0;
    }

    iframe {
        border: 0;
        height: 100%;
        width: 100%;
    }

    #container {
        height: 100%;
    }

    #headingContainer {
        color: #FFFFFF;
        font: 0px 'Tahoma';
        height: 0px;
    }

    #iframeContainer {
        height: calc(100% - 0px);
        width: 100%;
    }
</style>

<?php echo $Info['response']['Name']; ?>

	<div id="iframeContainer">
		<iframe src="https://bubble_app_url/<?php echo $clean; ?>"></iframe>
	</div>
</div>

Your code seems okay … How about making a standalone page with the bare basics, then gradually add in the styles and test as you go?

For example:

<div id="iframeContainer" style="width:50%">
<iframe style="width: 100%; height: 100%" src="https://mrvtst-responsive-inside-iframe.bubbleapps.io/version-test"></iframe>
</div>

Thanks Misha, this issue seems to be isolated to mobile browsers …all seems to be fine with desktop browsers resized…thats not an issue.

Even with a bare bone page…on IOS ( i cannot validate on Android) both Chrome and Safari it renders as if it is a fixed page…i’ll do some fiddling and see what i can come up with… i control the PHP etc so i can detect browser / device etc

@mishav on the bubble side are you aware of any fiddle and work arounds to treat the iframe container dimensions as screen size?

Its worth trying different techniques, this one looks promising … I found that adjusting the padding-bottom % to have a big impact … basically setting an aspect ratio.

2 Likes

@mishav thanks…i’d been searching the interweb and found the same…i will give that a punt…cheers Misha

This topic was automatically closed after 14 days. New replies are no longer allowed.