Position a Button

How do I place a button at the position marked with red.







All the methods I’ve seen works like :: lift alignment, right alignment, center alignment…but, didn’t find any method where I can specify the relative position of my gui elements. For example : A button is always gonna stay at 30% of the screen’s height, from the bottom.

Make panels so the screen is divided correctly, @zathras just updated the nifty wiki with some nice pictures:

https://wiki.jmonkeyengine.org/legacy/doku.php/jme3:advanced:nifty_gui_xml_layout

Solved.



Now, how do I add relative spacing between two buttons/elements. Do I have to use panels here too?

Yeah, I’d do it with panels.

1 Like

man you are fast! :o

But, is there should be a method specifying how the relative spacing should be? Cause with 10-15 or more buttons and/with different layout in a single screen, the whole thing is gonna be cluttered.



Paneling feeling like a bad practice to me. Do you feel otherwise?

There is no spacing support in Nifty currently. Want to add it yourself? :slight_smile:



There is only padding which basically shrinks the area that is available for the child elements. I know it’s not really spacing but it helps sometimes.

void256 said:
There is no spacing support in Nifty currently. Want to add it yourself? :)


Will it get added to the core if I write it? :P

If yes, then I might give it a go. My necessities are not big, but if it helps others in the long run I will try to come up with a solution. :) (Be aware, I am a horrible programmer :D)

I had a similar issue with one of my gui screens. I ended up adding a seperate, empty, panel with a fixed height. Not the cleanest solution, but it works.

I also used empty panels for this… Didn’t find a better way. Plan the layout on paper first, or better in Photoshop, using layers and in each layer you draw panels as colored embedded boxes. Also format your code (or name your panels) in a way so you don’t forget which ones the empty ones are…



If you have several evenly spaced controls, you can use the panels to define the maximum size of each box, including the padding. Then add the control and resize the height and width to 80% or something, centered inside. That makes the control appear padded, too.

iamcreasy said:
Will it get added to the core if I write it? :P


OF COURSE! :D
1 Like