Centering Overlay Widget Instance over Grid Layout

Question

I have a Composite using Grid Layout ( qx.ui.layout.Grid ).

However, I have to overlay an image over Grid Layout.

I managed to do it by : (c is the Composite, while this is Application )

c.setLayout(new qx.ui.layout.Grid());
var img = new qx.ui.basic.Image("myproject/test.png");
this.getRoot().add(img, {left: 500, top: 10});

The image is overlayed over Grid Layout successfully. However, I want the image centering at the center of the screen ( X-axis only , Y-axis is still required to be 10px from the top ), given that the Application occupies whole browser screen.

Tried :

{left: 50%} , can't run
{margin: auto}, the image disappears

How can I make the changes ?

Did you try `this.getRoot().add(img, {left: "50%", top: 10});`? — Richard Sternagel, May 22 '13 at 11:10
*facepalm* I misssed the quotes around the percentage. `{left: "50%"}` Almost working. I should minus half of the width of my image, but how can I do so ? — Raptor, May 22 '13 at 11:13

score 2 · Accepted Answer · answered May 22 '13 at 12:06

Answer to your question in the comments (for better code example rendering):

...
var imgWidth = qx.util.ResourceManager.getInstance().getImageWidth("myproject/test.png");
var imgWidthPercentage = imgWidth/qx.bom.Viewport.getWidth()*100;
this.getRoot().add(img, {left: (50-imgWidthPercentage)+"%", top: 10});

Centering Overlay Widget Instance over Grid Layout

1 Answers1