Hi. I’ve updated one of our Hype content areas by adding iPhone and iPad Portrait layouts in addition to our default layout. They would map to the Bootstrap 3 XS, SM/MD, and LG breakpoints.
When I view the exported HTML5 Hype document, the layouts change as expected at each breakpoint. However, when I use the Hype content inside the Bootstrap page, it always uses the largest layout. Inspecting the generated HTML using Chrome shows that the script is inserting the width/height of the large layout, regardless of however the browser is sized. Using the exported HTML I’ve inserted this, however:
<div id="simple_hype_container" style="margin:auto;position:relative;width:320px;height:320px;;overflow:hidden;" aria-live="polite">
I’ve gone through the docs several times, but I’m sure I must be missing something. Any idea what I could be doing wrong?
Thanks for any help.
Can you share your HTML and Hype export (or a small sample)?
One quick thing I noticed is that there are two semi colons after the height value in the style section.
I figured it out. I was using combined scale and responsive layouts, which wasn’t working. I removed the scale settings which I must have tried at some point and the layout is breaking properly. Thanks, Daniel.
I am having a similar problem with HYPE animations in a container HTML application that utilizes Bootstrap. In particular, text is being misaligned relative to the surrounding controls or adjacent text boxes.
I have tried using the “Protect from external styles” options without any effect. I have also tried manipulating the HYPE container CSS as mentioned in: http://hype.desk.com/customer/portal/articles/467813-known-issue---positioning-incorrect-in-animations-shown-on-pages-that-use-the-twitter-bootstrap-framework . Again, no improvement.
I have attached a test project illustrating this problem. It compares the same HYPE test animation in an HTML background with or without Bootstrap.
Archive.zip (124.6 KB)
Here’s a quick video to show the issue
Bootstrap is setting this property:
In your Style section, add this:
I’ll see if we can do better to insulate elements from this property.
I tested this fix in both my test case and production app. I added a further series of overlapping alignment rectangles to compare how various elements were being rendered relative to one another.
In general, this fix worked well in webkit browsers (full & mobile). However, there are still some slight misalignments when rendered in FF.
Thanks @Daniel for your insight.