Page 1 of 1
Text causes other screen elements to shift/displace when hovered
Posted: Mon Nov 01, 2021 12:46 pm
by dasauto1
I have a textbutton that gets bigger in size when is hovered. this causes other screen elements to be displaced accordingly. How do I isolate this textbutton? thanks.
Re: Text causes other screen elements to shift/displace when hovered
Posted: Mon Nov 01, 2021 2:01 pm
by Alex
Did you place this textbutton inside a container (hbox/vbox/grid/vpgrid, etc.) along with the other elements?
If so, try to position it separately.
Re: Text causes other screen elements to shift/displace when hovered
Posted: Mon Nov 01, 2021 2:31 pm
by dasauto1
The button is inside an hbox and the other elements are in another hbox. both hbox are same level children of a vbox.
Re: Text causes other screen elements to shift/displace when hovered
Posted: Mon Nov 01, 2021 7:54 pm
by felsenstern
The idea behind boxes, vbox and hbox is that the arranging of displayables. And if you make one element bigger then they are shifting/moving everything out of the way to correctly display them. You can of course always manage the position of those elements on your own. You don't need a vbox or hbox to arrange texts, frames, boxes and so on. Of course you have to consider anchors and positions.
Re: Text causes other screen elements to shift/displace when hovered
Posted: Tue Nov 02, 2021 4:19 am
by Inksword
You can also solve this by changing your art assets instead, by having an invisible transparent box around your un-hovered button that takes up the same space as the big button. So, if your smaller button is 50 x 50px and your big button is 80 x 80px, make the first button 50x50 but with a transparent border that makes it 80 x 80px including the transparency. That way the actual size isn't changing in terms of the space it's given by the GUI, but it visually changes sizes on the hover.
Re: Text causes other screen elements to shift/displace when hovered
Posted: Tue Nov 02, 2021 8:34 am
by dasauto1
Inksword wrote: ↑Tue Nov 02, 2021 4:19 am
You can also solve this by changing your art assets instead, by having an invisible transparent box around your un-hovered button that takes up the same space as the big button. So, if your smaller button is 50 x 50px and your big button is 80 x 80px, make the first button 50x50 but with a transparent border that makes it 80 x 80px including the transparency. That way the actual size isn't changing in terms of the space it's given by the GUI, but it visually changes sizes on the hover.
Thank you. I managed to solve this by using xmaximum, ymaximum. these give the effect you described, it leaves a certain "transparent" free area around the text that the text can't go pass it. The values I used for these properties is the same value of the bigger (maximum) size of the button when hovered.