Overflow problem with 100% scaling

1

Is there a way to make overflow visible on all scenes? I have overflow enabled for all groups, and am using JS to make the document scale proportionally. The document group has 100% height and width scaling in Hype.

Here’s my code:

<style>
@media screen and (min-width: 1000px) {
  #wrapper { 
    width:1200px;
    margin: 0 auto;
    height:auto;
  }
}

  @media screen and (max-width: 1250px) and (min-width: 200px) {
      #wrapper { 
    width:95%;
    margin: 0 auto;
    height:auto;
  }
}


<div id="wrapper" style="margin-top:7.5%; overflow:visible;">

    <div id="default_hype_container" style="margin:auto;position:relative;width:800px;height:540px;overflow:hidden;" aria-live="polite">
    <script type="text/javascript" charset="utf-8" src="Default.hyperesources/default_hype_generated_script.js?6242"></script>
  </div>
</div>


<script type="text/javascript">

const yourHeight = 540, yourWidth = 800;
positioning();
window.addEventListener('resize', positioning)
function positioning(){
var width =  document.getElementById('default_hype_container').offsetWidth;
var height = Math.floor((width*yourHeight)/yourWidth);



document.getElementById('wrapper').style.height = height + 'px';

}
</script>

When I use the developer tools, the first Div class HYPE_Scene has overflow:hidden. When I disable this the problem is fixed. What can I do?

2

From this, it doesn’t appear that you have 100% width/height scaling enabled… at least not on the first scene. The default_hype_container div is showing "width:800px;height:540px;" and if you did it would show "width:100%;height:100%;". When this is in effect, then the fact that the scene has overflow:hidden enabled wouldn’t matter, since the scene size would be the whole window size. You may simply need to re-export with the new container sizes?

Otherwise, the unsupported method to do what you ask would be just to override the style via:

<style>

.HYPE_scene {
	overflow: visible !important;
}

</style>

But feel free to elaborate on the issue; it isn’t clear to me what you’re hitting without the exact .hype doc.

1 Like
3

My bad, I was playing around with the dimensions - but it was originally 100% and didn’t work. I tried the code you provided however and it works perfectly, thank you very much!

1 Like