I am creating an app that will fill the browser window width but allow variable vertical dimension, displaying scrollbars in the browser or swipe scrolling on mobile.
I have changed the template index.html to…
html,body { margin: 0; padding: 0; width:100%; height:auto; overflow: auto; }
However there are 2 issues that I can’t seem to resolve.
- The canvas starts by zooming out from 0 width to 100% over a about 5 seconds when it first loads
- There is a margin at the top of approximately 3 or 4 pixels that appears when the canvas reaches 100% width?
It appears to be related to the lime-embed line because if I change it from…
lime.embed (“UI”, “content”, 1920, 1080);
to…
lime.embed (“UI”, “content”, 0, 0);
It continues to grow and scrolls off the bottom of the browser window.
Is there a better way to enable full width, variable height browser html5 apps?
OK, I’m, getting closer to an app that will scroll.
I’ve changed the index.html template to…
html,body { top: 0; margin: 0; padding: 0; width:100%; height:100%; overflow: auto; }
and set the following parameters in the project.xml file…
width="" height="" resizable=“true”
Setting height:auto in the html,body section will cause the window to slowly zoom to infinity.
The above alone will cause the browser to continually fire resize events, however adding the following to the Haxe code will acheive the correct result of a full width app, with scrollable window…
var element = js.Browser.document.getElementById (“content”);
element.style.height = “1000px”; // This number can be a calculation of the ui elements height
However this appears to cause a problem with the stage.addEventListener(Event.RESIZE, resize); firing, changing the width of the browser window fires the event but changing the height doesn’t?
Any ideas?
I would welcome any additional ideas for how resizing in OpenFL should be handled!
We currently watch the “embed” element used – and look for changes to its size. If it has a set CSS size, then whether the parent page allows it to scroll or other changes – it should not affect the resize – but if the embed element changes sizes, it will.
You can also lime.embed to a canvas element instead of a DIV element
