<div dir="ltr"><div><div><div>I'm want to display some elements only when needed. So I did it like this (the components are inside a Column):<br><br>            TextSwitch<br>            {<br>                id: switchTextColor<br>

                text: qsTr("Override text color")<br>                checked: settings.overrideTextColor<br>                states: State<br>                {<br>                    name: "checked"; when: switchTextColor.checked == true;<br>

                    PropertyChanges { target: textColorButton;  height: Theme.itemSizeSmall}<br>                }<br>                transitions: Transition<br>                {<br>                    from: "*"; to: "checked"; reversible: true<br>

                    NumberAnimation { property: "height"; duration: 200; easing.type: Easing.InOutQuad }<br>                }<br>            }<br><br>            ColorButton<br>            {<br>                id: textColorButton<br>

                height: 0<br>            }<br><br></div>And the ColorButton component is:<br>Row<br>{<br>    id: root<br>    property string color: "transparent"<br>    width: parent.width<br>    Rectangle<br>    {<br>

        id: colorIndicator<br>        color: root.color<br>        width: Theme.itemSizeSmall<br>        height: Theme.itemSizeSmall<br>        border.color: "black"<br>        border.width: 5<br>    }<br><br>    Button<br>

    {<br>        id: button<br>        text: "Choose a color"<br>        onClicked:<br>        {<br>            var dialog = pageStack.push("Sailfish.Silica.ColorPickerDialog")<br>            dialog.accepted.connect(function() { root.color = dialog.color })<br>

        }<br>    }<br>}<br><br></div>Instead of hiding, the textColorButton is at the top of the Page. If I check switchTextColor, then it goes where it should be. If then I uncheck the Switch, the component below goes up, but the textColorButton doesn't disappear (screenshot)?<br>

<br></div>What am I doing wrong?<br><div><div><div><div><br clear="all"><div><div><div><div>--</div>Marcin<br></div>
</div></div></div></div></div></div></div>