How to set "bottom" and "right"

8 views
Skip to first unread message

skid

unread,
Apr 9, 2010, 6:26:19 AM4/9/10
to ukijs
I want the create a rectangle that will be anchored to all sides, but
with a margin of 10 pixels from the window edges. Is there a way to
set "bottom" and "right" properties of a rectangle ?

So far I've been able to figure out only how to set boxes on a certain
distance from the top and the left edge of the container.
Also, is there a way to specify the width of a box in percent ?

Volodya Kolesnikov

unread,
Apr 9, 2010, 6:37:11 AM4/9/10
to uk...@googlegroups.com
There's the screencast about positioning: http://vimeo.com/9020286

But once again. Positioning is set via rect and anchors attrs.
1. rect defines initial position. it has the following format: "left top width height". Everything in pixels.
So to move your box to right bottom you just have to increase left and top properties
2. anchors specify how you box will react to its parent resize. Set anchors to "bottom right" and your box will move with the bottom right corner.
3. There's a special second parameter to attachTo method which specifies initial dom/window size.
Example
uki(...).attachTo(window, '1000 1000')
This means that you expect the window to be 1000px x 1000px. And if it's not all the attached views will be resized according to anchors rules.

> --
> To unsubscribe, reply using "remove me" as the subject.

Vladimir Kolesnikov
twitter.com/voloko
vol...@gmail.com


Roberto Saccon

unread,
Apr 9, 2010, 6:42:50 AM4/9/10
to ukijs
just set the rect attribute of your rectangle 10 pixels smaller on
each side from the size of the containing element and you get what you
want. The most-outer containing element is where yo attach to, and the
size of the rect you define there, is from where all the layout stuff
is nested, and dimensions are in pixels only, otherwise it would be a
hell of a mess ! This is at least how I understand things.

skid

unread,
Apr 9, 2010, 7:17:03 AM4/9/10
to ukijs
Tell me if I get this correctly:

I want a 300x100 box to be positioned 10 px from the bottom of the
window and 10px from the right of the window. I can do this:

uki({ view: "box", rect: "690 890 300 100", anchors: "bottom
right" }).attachTo( window, 1000, 1000 );

No matter my screen resolution or the size of the window when I first
open the page, Uki will compensate for the difference (i.e. subtract
the actual window size from the supplied size) and place it where I
intended ?

Volodya Kolesnikov

unread,
Apr 9, 2010, 7:24:42 AM4/9/10
to uk...@googlegroups.com
Yes.
But you have to write 'Box' instead of 'box' and pass last parameter as '1000 1000', not as 1000, 1000. Or you can manualy create
new uki.geometry.Size(1000, 1000)

Vladimir Kolesnikov
twitter.com/voloko
vol...@gmail.com


skid

unread,
Apr 9, 2010, 7:27:29 AM4/9/10
to ukijs
Cool. Yes, I'm aware of the typos I made. Thanks a lot.
Reply all
Reply to author
Forward
0 new messages