Trouble using new Responsive layouts in a Bootstrap 3 page

Responsive Responsive Layouts
1

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">
<script type="text/javascript" charset="utf-8" src="simple.hyperesources/simple_hype_generated_script.js?83810"></script>
</div>

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.

2

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.

3

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.

4

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)

5

Here’s a quick video to show the issue

Bootstrap is setting this property:

* {
  -webkit-box-sizing: border-box;  
  -moz-box-sizing: border-box;  
  box-sizing: border-box;  
}

In your Style section, add this:

  .HYPE_element { 
  -webkit-box-sizing: content-box;  
  -moz-box-sizing: content-box;   
  box-sizing: content-box;  
    }

I’ll see if we can do better to insulate elements from this property.

6

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.