# \[SOLVED\] Phaser full screen with more than one element?

**URL:** <https://phaser.discourse.group/t/solved-phaser-full-screen-with-more-than-one-element/3359>\
**Category:** Phaser 3\
**Created:** [August 5, 2019, 3:10am UTC](https://phaser.discourse.group/t/solved-phaser-full-screen-with-more-than-one-element/3359 "2019-08-05T03:10:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ivopc](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ivopc/32/980_2.png) [@Ivopc](https://phaser.discourse.group/u/Ivopc)\
**Post date:** [August 5, 2019, 3:10am UTC](https://phaser.discourse.group/t/solved-phaser-full-screen-with-more-than-one-element/3359/1 "2019-08-05T03:10:01Z")

</div>

I’ve used the native Phaser ScaleManager to get a full screen game, but the native Phaser ScaleManager only full screen the game canvas element, I need more than one, because I am using others HTML elements to compose the game UI.  
I’ve try to make full screen by myself, but for some reason Phaser is blocking this, here the code:

```
var toggleFullScreen = function () {

    var elem = document.querySelector("#game");

    elem.requestFullscreen = elem.requestFullscreen || elem.mozRequestFullscreen || elem.msRequestFullscreen || elem.webkitRequestFullscreen;

    if (!document.fullscreenElement) {
        elem.requestFullscreen()
            .then({})
            .catch(err => {
                console.log(`Error: ${err.message} (${err.name})`);
            });
    } else {
        document.exitFullscreen();
    };
};

```

When I try to use my own Phaser is going back and forth (bouncing) the full screen (backing to normal view), I think the Phaser is blocking it for some reason, there’s no other solution? I tryed to change the fullscreenOptions in Phaser toggleFullscreen API, but there’s no complete description for the property.

---

<div class="post-metadata">

**Author:** ![Ivopc](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/ivopc/32/980_2.png) [@Ivopc](https://phaser.discourse.group/u/Ivopc)\
**Post date:** [August 5, 2019, 3:24am UTC](https://phaser.discourse.group/t/solved-phaser-full-screen-with-more-than-one-element/3359/2 "2019-08-05T03:24:54Z")

</div>

WOOOW, solution! I called the method **this.scale.stopListeners();** before the my own full screen method, like this:

```
this.fullScreen.setInteractive().addInteraction("pointerdown", () => {
    this.scale.stopListeners();
    Elements.toggleFullScreen();
});
```