Dom element in fullscreen mode

I can’t figure out how to pass dom element into fullscreen mode ? I have tried many options , but unsuccessful .

this.html_element = this.add.dom(textfield_cam.scrollX+5, textfield_cam.scrollY+6).createFromCache('nameform_2')  .setAlpha(0.7)   .setOrigin(0,0)  .setDepth(4);

this.scale.fullscreenTarget = document.getElementById( this.game.config.parent );

part of my game config :

var config = {
    type: Phaser.AUTO,
    scale: {
    mode: Phaser.Scale.FIT,
    parent: 'app',
    autoCenter: Phaser.Scale.CENTER_BOTH,
    width: 1000,
    height: 760
        },
      dom: {
     createContainer: true
    },.......

I tried set ‘app’ as “id” in my html object and also wrap it in “div”, it is only allows show either game or either html element but not combine them together.

Here is example of my html element :

<div id="app"> 
<input name="text_input" type="text" class="my_stl" autocomplete="off" id="my_txt" value=""/>
   </div>

The problem is solved by myself.
If someone interested :
I wraped all my code of index.html in < div id=“app”> … < /div >
And I wrote in config : " … parent: ‘app’ … "
in create() : this.scale.fullscreenTarget = document.getElementById(‘app’);

After this Dom elements can be loaded successfully in fullscreen mode

3 Likes

Thank you so much!

beautiful, thank you.