I am having some trouble getting Hype html exports to work in a Bootstrap framework (the one I am currently working in was generated by Dreamweaver’s Bootstrap html setup, if that makes a difference).
I have made a simple Hype animation “fluid” by checking the scene’s scaling boxes and setting a pinning style. It works great on its own, and great in a regular hand-coded site made in Dreamweaver or otherwise. However, when I paste the assigned html into a Bootstrap column div it doesn’t even show up. I haven’t seen a really thorough process on Hype/Bootstrap yet, so I am worried I might be skipping a step, as a newbie to Hype, but I am pretty familiar with coding. Any advice on what I am doing wrong?
Did you launch the developer tools in a browser to see if any errors were being displayed?
How is the Hype project being added to the page? Is it just embedded HTML code or is an iFrame being used? While an iFrame is not ideal, it can be used to troubleshoot the error. Maybe there's something being used by Bootstrap or Dreamweaver that's conflicting with Hype.
Hey Michael! Thanks for getting back to me. I did check the developer tools, and there are no errors. I added Hype to the page through HTML code, just the section that says "copy these lines to your document:’ in the exported file Hype creates. I am thinking the problem might be between Bootstrap’s percentages and Hype’s?
What appears in the space? Nothing? Is the Hype project loading at all?
I'm not familiar with Bootstrap + Dreamweaver + Hype. Yet, it seems like something should appear. Even if the Hype project doesn't resize properly, it shouldn't just disappear.
Did you inspect the element? What's going on inside the "div" tag for the Hype project?
Figured it out! The Hype projects weren’t playing nice inside Bootstrap’s main ‘container’ div, though there didn’t seem to be any conflicting js or css in my developer tools. I’m going to guess that Bootstrap’s percentage-based scaling might have clashed with Hype’s? And maybe only in Dreamweaver’s version of Bootstrap…anyway, added some min and max heights to my Hype divs and kept them outside Bootstrap’s ‘container’ divs and boom! They appeared and worked swimmingly!
Sorry I can’t think of a good technical explanation (not that talented) , but it seemed as soon as I put my flexible layout Hype divs inside a Bootstrap div they would render with 0 height. Outside, totally fine. Hope this helps anybody else with this issue!
Thanks for your help Michael, I should probably read your book!
This is a general problem that if you use Hype's flexible layout, it will set the width/height of the document to be 100%. However, the question is "100% of what?" If a containing div does not have a size explicitly specified, or somewhere up a chain of parents there isn't a height specified (unless it goes all the way up to a body), then the size value will collapse to zero.
Not very familiar with this but Is it possible that make it that if no width/height is found by Hype with flexible layout, a console warning is logged and the flexible layout is not used. This way people can see scene and get a Hype warning in the console of why they are seeing a normal layout…
