Hey all,
On a project we’re making to release for the Bubble community as a building tool, we’d like to include some HTML generated outside of Bubble with its own custom CSS.
We’re running into an issue here: Bubble CSS can affect this content’s styling, and this CSS can affect Bubble’s content’s styling.
There are 2 approaches we’ve tested here:
Use iframes to encapsulate the HTML and CSS, so that the page’s styles can’t affect the iframe’s styles (and vice versa). The issue we’re running into here is that the iframes don’t automatically adjust their height based on the content inside of them, so they aren’t properly displayed. The height is also dynamic, so the Bubble elements below this one (further down the page) need to be shifted as well - using Javascript to change the iframe’s height won’t work.
Modify the CSS so that our styles only apply to the HTML we’ve added. One way to do this would be to have a container div and applying all the CSS rules only inside of this container. We’ve set this up to be generated by taking the CSS and running it through an SCSS preprocessor, with all of the classes applying only to our container div. This hasn’t produced clean results, though.
Has anyone tried to use iframes to display content with a variable height before? Or does anyone have an alternative suggestion?
Thanks,
Chris
AirDev