Full width (100%) fluid

41 views
Skip to first unread message

Nique

unread,
Feb 1, 2011, 3:03:56 PM2/1/11
to ukijs
Hi there,

I want to make a 'layout' that is just as width as the window is. It
shouldn't be smaller than a total of 960px.
How do i accomplish this. I know this is probably going to be simple,
but i'm just not getting it. I am struggling (in war, in fact) with
the rect property.

I just want a top, left, main and right layout.

Is it also possible to disable the handle? I do not want my end users
to be able to drag or drop some split handles.

Thank you!

Roberto Rivera S.

unread,
Feb 1, 2011, 9:25:32 PM2/1/11
to ukijs
Hi, Nique.
The rect property it's just for define the box and the original
position, with this format: left top width height. All in pixel.
If you want a fluid layout, you need to pay attention to the anchors
property, and the attachTo method. So, in your case, the attachTo
should be something like this:
<code>
uki(...).attachTo(window, '960 600', {
minSize: '600 0'
});
</code>

That means that you expect a window to be 960px x 600px with a min
size of 600. Add anchors for the four sides (anchors: 'left top right
bottom'), and you get a fluid layout that resize in all directions.
More info here:
http://groups.google.com/group/ukijs/browse_thread/thread/5820e087fc305f0e/fafad35dd4eca9a9?lnk=gst&q=attachTo#fafad35dd4eca9a9

And for the anchors, I recommend you this screencast: http://vimeo.com/9020286

For handle, I think you need to draw two boxes and not a splitView.

Regards

Nique

unread,
Feb 2, 2011, 11:30:00 AM2/2/11
to ukijs
Thanks. I figured out i can use Flow for a better layout without
handles.

On 2 feb, 03:25, "Roberto Rivera S." <rrive...@gmail.com> wrote:
> Hi, Nique.
> The rect property it's just for define the box and the original
> position, with this format: left top width height. All in pixel.
> If you want a fluid layout, you need to pay attention to the anchors
> property, and the attachTo method. So, in your case, the attachTo
> should be something like this:
> <code>
> uki(...).attachTo(window, '960 600', {
>   minSize: '600 0'});
>
> </code>
>
> That means that you expect a window to be 960px x 600px with a min
> size of 600. Add anchors for the four sides (anchors: 'left top right
> bottom'), and you get a fluid layout that resize in all directions.
> More info here:http://groups.google.com/group/ukijs/browse_thread/thread/5820e087fc3...

Johan Rydberg

unread,
Feb 4, 2011, 6:19:16 AM2/4/11
to uk...@googlegroups.com
On a related matter, how do I center something inside a container?

Say that I have a HFlow (with children of different sized) that is 340px side
(dynamic sized), how do I center that in a 400px wide Container?

Nique

unread,
Feb 6, 2011, 7:01:54 PM2/6/11
to ukijs
I believe you can use percentages.

On 4 feb, 12:19, Johan Rydberg <johan.rydb...@gmail.com> wrote:
> On a related matter, how do I center something inside a container?
>
> Say that I have a HFlow (with children of different sized) that is 340px
> side
> (dynamic sized), how do I center that in a 400px wide Container?
>
Reply all
Reply to author
Forward
0 new messages