Jump to content

Phaser 3 responsive html input overlay


Recommended Posts

Hi guys,

I am trying to create an text input box with a number. 

I understood that the best way to do this is to create an html overlay.
My problem is that when I change the browser size the overlay goes out of position with the actual game canvas.

If anyone has any help to offer it would be great.

I attached my html and my css files.

<div id="game">
        <div class="gameoverlay">
            <div class="overlay">
                <div class="texts" id="texts">
                    <input type="number" id="cashexceed" class="inputtexts" min="1" max="1000">
                    <input type="number" id="cashincrease" class="inputtexts" min="1" max="1000">
                    <input type="number" id="cashdecrease" class="inputtexts" min="1" max="1000">



html {
  width: 100%;
  height: 100%; }

body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden; }

    z-index: 1000;
    width: 5px;
    max-height: 1px;
    padding: 0px;
    font-size: 10px;
    pointer-events: auto;

    max-width: 30px;
    text-align: center;
    position: inherit;
    bottom: 50%;
    top: 50%;
    left: 40%;
    right: 60%;


      /* visibility:hidden;  */
        pointer-events: none;
        position: absolute;
        top: 0%;
        bottom: 0%;
        z-index: 1000;

#game {
  position: relative;
  text-align: center;
  width: 100%;
  height: 100%; 
  #game canvas 
    padding: 0;
    margin: auto;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...