[Nifty] Draggable starting in the middle of a screen


I try to learn how to use draggable objects.

So I began with something really simple :



Main layer


<layer id=“mainLayer” childLayout=“absolute” height=“100%” width=“100%” >

<control id=“mainPanel” name=“draggable” height=“80%” width=“30%” align=“center” valign=“center” childLayout=“overlay” >

<!-- Background -->

<image height=“100%” width=“100%” filename=“classicSheetBG_1x2.png” imageMode=“normal” />




It works but : Since the main layout is absolute, I don’t know how to center my panel in the middle of the screen in the beginning.

( it begins on the top left corner for now )

Is there a way ?

Thanks in advance.

From a html / css background, I could suggest possibly using negative margins and a static size for your menu.

Something like:

mainPanel width 500px

left 50%

margin left -250px

I’ve just recently started delving into the Nifty experience though. So my thought’s may not work at all :slight_smile:

Just giving a bit of info on what works in the css / html space.

elements that are direct children of an element with childLayout=“absolute” will always be absolutly positioned. there is no support for other kind of alignments or layouts for these kind of elements. absolute childLayout is absolut absolut :slight_smile: you’ll need to calculate the position on your own and do the math on your own to center the element and then use setConstraintX()/setConstraintY() to position the element.

So I need to use setConstraintX()/setConstraintY() if I want to postion my panel during the start method. Good to know.

And if I want to position the origin to (200, 200) in the start.

Something like :


<panel … childLayout=“absolute” >

<control x=“200” y=“200” …/>



should be enough ?

I think I’ve already tried that, but perhaps I missed something. I will try again.

yes, that will work. usually you want to add “px” or “%” to values. the syntax without “px” or “%” was added only a couple of months ago and I’m not sure if the version you’re using already supports it. with more current versions x=“200” will be treated the same as x=“200px” tho.