Border (Rectangle) around Column resize

ephe

I have created a Column with a border (see "this post":http://developer.qt.nokia.com/forums/viewthread/13083/)

@
Rectangle
{
id: rectangle
color: "#f3f3f3"
radius: 5
border.color: "#5e5b5b"
border.width: 2
width: 640;
// height: column.height

Column
{
    id: column
    objectName: "column"

    anchors.margins: 1
    anchors.left: parent.left
    anchors.right: parent.right

    move: Transition {
            NumberAnimation {
                properties: "y"
                duration: 1000
                onStarted: console.log("move animation started")
            }
        }

    onHeightChanged:
    {
        rectangle.height = height
        console.log("height changed")
    }
}

}
@

I have filled the Column in C++ which is working fine.

Now I'm making a child invisible with

@
item->setProperty("visible", false)
@

The child gets invisible and the rest of the items are moved up.
I have the move defined like this:

@
move: Transition {
NumberAnimation {
properties: "y"
duration: 1000
}
}
@

I can see the animation. The Rectangle around the column is not resized. Is it possible to resize it while the move animation is running? So that the rectangle gets smaller as the items are moved up? I thought that the height of the column would change when a child is removed.

And does anybody maybe know why I cannot see the console.log of the NumberAnimation.onStarted?

Eddy

As far as i can see you didn't set an anchor to the bottom of your -rectangle- id : column.

I would suggest setting the anchors.bottom of the last item to the bottom of -rectangle- id column.

ephe

Thank you for your quick answer!

I have tried setting
@anchors.bottom: column.children[column.children.length-1].bottom@
in the Rectangle.

I've also tried setting this in the onChildrenChanged of the column.

And I tried setting @anchors.bottom: column.bottom@
in the Rectangle.

Sadly, none of them was working.

I'm not sure if this is what you meant?

Eddy

What i meant was that in the following code the anchors.bottom is not set to the id:rectangle. So how can id: rectangle know it's bottom has to follow id: column?

@
Column
{
id: column
objectName: "column"

anchors.margins: 1
anchors.left: parent.left
anchors.right: parent.right

@
Did you try to set
Anchors.bottom: parent.bottom here?

Why not use anchors.fill: parent?

ephe

When I set anchors.bottom: parent.bottom, I've got a weird behaviour. The Rectangle still stays the same size, the children of the column are aligned to the bottom and they are moved in from beneath the rectangle.

When I set anchors.fill: parent, the rectangle is not visible anymore. I've got the same problem when I set anchors.top: parent.top

Eddy

Can you provide us a small compilable example so we can test it out?

ephe

You can download the example "here":http://dl.dropbox.com/u/2346027/groupbox_rectangle.zip
Thank you for your help!

ephe

I still haven't found a solution for that problem.
I just tried setting the height of the rectangle to column.height.
When I do that, the application crashes. Does anybody know why?

Which properties change when a child of a Column gets invisible?