HTML elements positioning

Help & Support
1

Hello everyone, im not HTML nor CSS pro but im trying to implement Text input which went well but im stuck on positioning, script where i create this text input is attached to UI element of playcanvas and i thought the position of text input created using html/css would appear on the same position on screen and could be managed in editor, sadly it doesnt, so i was wondering how to get position of UI element and somehow to have the text input element on the same position

image

it looks like that but whenever i change size of the screen the button is going with the screen, not with 2D screen in playcanvas like other UI elements, thanks for reply

image

this is how it looks when resizing the screen, i need it to have static position on screen at least

2

Hi @smokys!

There is probably a CSS file in your project. Here you can add position: static; at the correct element (or replace the current value). I think this only works if there is also a width and height property, so maybe you need to add this as well.

You can find more information on the page below.

3

When i change it to static the whole text input vanishes to the up left screen, and all css attributes are lost as the input is invisible, here is the current css implemented in script

image
image1364×634 116 KB

with static position

image

with absolute

image

as you can see with static position it changes its position but also gets invisible you can only see those 2 arrows due to type: number

  • again im really newbie with html / css so maybe somebody can notice what i did wrong there, seems like i also need to set up resize listener to adjust text input size to the screen size
4

There is no easy solution without understanding HTML/CSS.

Do you use a PlayCanvas example project for your text input?

5

I used to make websites using just html / css about 8 years ago so i remember basics

  • no i dont, i made it on my own somehow, i have listener ready but i cant even initially put text input on the same position as my UI element, i had to manualy set top and left attributes through css… but that is not efficient way, but i think what i can do is to manualy set the input position for most common screen sizes, but i would prefer to have some universal solution so i dont need to waste much time to manually set input position for at least 4 different screen sizes, thats why i have listener ready and would like it to automatically set the position of input to position of UI text element i have, for example if player decides to use landscape mode
6

Alright, I hope someone can help you.

In the meantime, I suggest to check the topic below.

1 Like