Jump to content

Trouble filling parent element in DOM


Recommended Posts

<body>
<div id="game" style="height: 600px; width: 800px; margin: 20px; position:relative;">
</div>
<script type="text/javascript">

var game = new Phaser.Game('100', '100', Phaser.CANVAS, 'game', { preload: preload, create: create, update: update}, false, false);

Here is the relevant code. According to the documentation the phaser canvas should fill the parent container when the first two arguments are '100'. However instead it takes on the height and width of the window. The canvas element IS a child of the div with the id "game" however it is much bigger than that div (its the size of the window). I think I must be making a silly mistake, but I have been fiddling around with it for 30 mins or so and can't get it to work. 

Thanks for taking a look.

Link to post
Share on other sites

Sounds like a bug, possibly related to this.

Someone with more knowledge of Phaser than me should be able to confirm.

I followed through the code and it takes a pretty long path, error seems to be relating to `this.boundingParent`, its never set so it uses the visualBounds, which looks like its the window.

A short term fix would be to grab the height and width from your #game element directly and use that in the constructor or use JS to set height/width for both the containing element and the Phaser constructor.

Link to post
Share on other sites

Issue https://github.com/photonstorm/phaser/issues/2458 seems specific to phaser 2.4.7 and uses game.scale.scaleMode with a fixed # of pixels for width/height - scaling the actual pixels to be visually larger. If you specify a parent container in the Phaser.Game constructor, the .SHOW_ALL method doesn't scale at all.

This issue could be related, but I think this is separate issue as this it affects the actual # of pixels for width/height, not actual scaling. Could be wrong, but I think this issue has been around since at least 2.4.6.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...