pageAlignVertically / pageAlignHorizontally

[HoratioHuffnagel]

Hi,

I've been struggling to get canvas resizing to work consistently, and I was wondering if someone could point me in the write direction. I've looked at a lot of previous posts / tutorials, but there appears to have been some changes in recent times to the API which is causing some confusion. 

So what I'm trying to do is get the canvas to resize to fill the screen (in portrait mode) - such that the canvas will fill the width, but height has black borders and is centered. This is the code I am using:

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
this.scale.setMinMax(this.game.width / 2, this.game.height / 2, this.game.width, this.game.height);
this.scale.pageAlignHorizontally = true;
this.scale.pageAlignVertically = true;
this.scale.compatibility.forceMinimumDocumentHeight = true;
this.scale.refresh();

 The problem is - that it does nothing. The game fills the width properly, but it's simply placed at the top of the screen, with a large space at the bottom. It's not being vertically aligned.

What is the secret to getting this to work?

Cheers!

[drhayes]

Chances are the parent container for the canvas does not, itself, have 100% height. You probably have to set that yourself as a CSS property on the container div or the HTML body, whichever is the parent container.

In fact, you'll probably set it on the body too, even if it is not the canvas container.

[HoratioHuffnagel]

Thanks for the reply. It seems you are on to something - but I can't quite get it to work. 

(I am assuming the parent container is the container whose ID we pass to Phaser.Game when we create a new instance of the game)

By setting the parent containers width explicitly (in pixels), the canvas will align itself correctly. 

However, setting the dimensions to percentages - it no longer works. Any thoughts on how to get this responsive? What's maddening  is I have seen examples of this that do not set the height of the container - and it seems to work. I can't see why...

        #game {
            position: relative;
            height: 100%;
            width: 100%;
        }

 

[drhayes]

First make sure you're using a block-level element, like a div (or set display:block in the CSS). Block-level elements take up 100% width by default unless you do something else, but I like declaring it to make the intent clear. Now that element, and every single one of its parents all the way up to the body, has to have height:100% as well. Is that working for you?

[HoratioHuffnagel]

Perfect! Thank you - it's strange, but all I had to do was add a width to the HTML tag. What's strange about that is I have a simpler version (that I was going to use as an example) - that just worked. No need to set the width. Yet they are essentially identical code. 

But yes - the secret was to make sure the ancestors were 100% width too, going all the way to the top.

Thanks!