Why does my project "zoom" into its container?

#1

Why does my project start small, but zoom into place rather than simply loading into it’s container?

CLICK HERE TO VIEW PROJECT

I’m simply trying to keep my project about 85% of the width of the div in which it is embedded.

#openfl-content { background: #86B9F2; width: 85%; height: 85%; position:relative;}

<div id="openfl-content"></div>
       <script type="text/javascript">
            	lime.embed ("RaceTo100", "openfl-content", 800, 600, { parameters: {} });
       </script>
</div>
#2

Hum it already happened to me I think…
Can you show your <window> in config.xml?

#3

Did you mean the project.xml file?

<window background="#104273" fps="60" />
<window width="800" height="600" />
<window orientation="landscape" vsync="false" antialiasing="0" if="cpp" />
#4

Can you try <window width="0" height="0" if="html5"/>. It should fit your div container.

#5

No luck. That just resulted in this:

image
image.png1256×803 184 KB

#6

Just add a container on top of your openfl div :

<style>
...
#openfl-container { width: 100%; height: 100%; } 
...
</style>

<div id="openfl-container">
	<div id="openfl-content"></div>
</div>
#7

That makes sense, but the project still “grows” into the container. I don’t understand why it doesn’t just start out at the specified dimensions.

#8

Strange… I checked your page source, and if you add this line, it seems to fix the issue :

<style>
...
#gameFocus { width: 100%; height: 100%; } 
...
</style>
2 Likes
#9

Well done! That stopped the zooming of the project. Thank you. Now I gotta figure out how to keep the container’s dimensions the same as the projects. Great help!

1 Like