make text field responsive - out of center after resizing

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
4ctive
Posts: 35
Joined: Mon Dec 16, 2019 10:07 am

Hi Hopki,
Hi Everybody,

I am trying to get a text field responsive bei resizing it, depending on the player width.
My Problem ist, that the text field is out of the center after resizing. The text field is positioned with anchor in the top center.

This does not happen with other elements like rectangles or images...
Attachments
Bildschirmfoto 2021-11-12 um 12.30.46.png
Bildschirmfoto 2021-11-12 um 12.30.46.png (47.67 KiB) Viewed 1494 times
Bildschirmfoto 2021-11-12 um 12.30.55.png
Bildschirmfoto 2021-11-12 um 12.30.55.png (51.97 KiB) Viewed 1494 times
Bildschirmfoto 2021-11-12 um 12.31.04.png
Bildschirmfoto 2021-11-12 um 12.31.04.png (47.62 KiB) Viewed 1494 times
Bildschirmfoto 2021-11-12 um 12.31.14.png
Bildschirmfoto 2021-11-12 um 12.31.14.png (60.86 KiB) Viewed 1494 times
Best Regards,
Benjamin
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Benjamin,
This would be right as you are reducing the with of the text box after it opens.
What you need to do is not only change the width but reposition the element.
Select the Position Logic block.
Then add: Player Width, <, 300: X: 150, Y: 50
If you used scale, then you could use the scale anchor.
For more information on this subject please see: https://ggnome.com/gg_webinars/skin-edi ... -and-size/

The project is attached.
Regards,
Attachments
project.zip
(12.32 KiB) Downloaded 134 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
4ctive
Posts: 35
Joined: Mon Dec 16, 2019 10:07 am

Hi Hopki,

thanks for your answer.
I understand the thing with repositioning the element when resizing it. I have checked and it worked as you said. Still one problem I have: When doing it like you said, the text field is not showing any text as long as it stays in the bigger dimensions. As soon as it changed to the smaller dimensions the text appears. Do you have any thoughts about this? I think it has to do something with the "calc" command. I am using calc(100%-320px) in both states (bigger and smaller dimensions).

As a workaround I use 2 text fields and make them visible depending on the screen size. That works fine so far.
Best Regards,
Benjamin
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Benjamin,
Using my project how would I reproduce the issue you are seeing because I see text all the time?
Also please say which browsers you have tested with.
Regards,
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
4ctive
Posts: 35
Joined: Mon Dec 16, 2019 10:07 am

Hi Hopki,

The problem is that the whole text field is getting smaller, thats the reason, why I couldn't see my text. In my project the text field got so small, that there was no more space for the text. The text field is getting smaller even if the browser is still in full size, when using the logic size block. I think it has to do with the calc command. When using a fixed pixel height, everything seems to be fine.

You can reproduce it in your project by using the calc command for the height.
1. Delete the size logic block.
2. Put in calc(100%-200px) for normal height.
3. Checking the live preview - everything should be fine.
4. Put in calc(100%-200px) for size logic block (and use width <= 300, width 200, height: calc(100%-200px)).
5. Checking live preview - the text field is smaller even if the browser window is still in full size.

Live preview without size logic block:
Bildschirmfoto 2021-11-14 um 11.27.44.png
Bildschirmfoto 2021-11-14 um 11.27.44.png (212.21 KiB) Viewed 1450 times
Live preview with size logic block:
Bildschirmfoto 2021-11-14 um 11.27.29.png
Bildschirmfoto 2021-11-14 um 11.27.29.png (233.22 KiB) Viewed 1450 times
Settings:
Bildschirmfoto 2021-11-14 um 11.27.17.png
Bildschirmfoto 2021-11-14 um 11.27.17.png (38.05 KiB) Viewed 1450 times
Bildschirmfoto 2021-11-14 um 11.27.07.png
Bildschirmfoto 2021-11-14 um 11.27.07.png (52.09 KiB) Viewed 1450 times
Best Regards,
Benjamin
Post Reply