vastron 0 Posted February 21, 2018 Report Share Posted February 21, 2018 Hi guys, I have created some input fields in the DOM and I place them above my phaser game with css. In my game I use game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; so I use media queries to control the position of the input fields. I do it like this => #inputs { position: absolute; top: 30%; left: 40%; width:100%; } @media only screen and (max-width: 560px) { #inputs{ top: 35%; left: 20%; transform: scale(0.8,0.8); } } But it is almost impossible to follow the Phaser scaling!If you have any tips, please share! Quote Link to post Share on other sites
samme 722 Posted February 21, 2018 Report Share Posted February 21, 2018 I never got this exactly right, but something like (see "caption" underneath) Quote Link to post Share on other sites
vastron 0 Posted February 22, 2018 Author Report Share Posted February 22, 2018 Thank you, I tried it, but it seems I cannot escape media queries, so I am thinking of using the bootstrap modal for my form. Quote Link to post Share on other sites
vastron 0 Posted March 2, 2018 Author Report Share Posted March 2, 2018 I ended up creating a modal and styled it like this. My game is inside the #canvasWrapper. It now looks ok with the game scaling! <style> body { background-color: black; box-sizing: border-box; } * { padding: 0; margin: 0; } #canvasWrapper { width: 99vw; height: 99vh; margin: 0 auto; } .modal.in { display: flex !important; } .modal .modal-dialog { margin: auto; } h4 { text-align: center; } .fa-undo-alt, .fa-check { display: none; } .modal-dialog { z-index: 50000; } @media screen and (orientation: portrait) { body.modal-open { position: fixed; } } </style> Quote Link to post Share on other sites
Recommended Posts
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.