# Element won't hide properly

**URL:** <https://forums.fusetools.com/t/element-wont-hide-properly/4797>\
**Category:** How-to Discussions\
**Created:** [July 9, 2016, 7:21pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797 "2016-07-09T19:21:46Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [July 9, 2016, 7:21pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/1 "2016-07-09T19:21:46Z")

</div>

Hi!

I have a panel that I want to hide based on a given state. Per now the content is hidden, but I can’t make the whole element go away.

[Screenshot of how it behaves](http://i.imgur.com/k6xeFWk.png) and [screenshot of how it should behave](http://i.imgur.com/SRV5AX6.png)

As you can see from the screenshots, the purple element stays when `showFocus` is set to false. I would expect everything but the red bar to disappear. What’s the reason for this behaviour?

```auto
<App>
    <ClientPanel>
        <StackPanel Dock="Top" Color="#3D206A" Padding="10">
            <JavaScript>
                var Observable = require('FuseJS/Observable');

                var showFocus = Observable(true);

                module.exports = {
                    showFocus: showFocus
                }
            </JavaScript>

            <Grid Columns="1*,30" Alignment="Top" Height="60" Color="Red" ux:Name="searchBar">
                <TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
                    <Panel Dock="Bottom">
                        <Rectangle Height="1" Width="100%" Color="White"/>
                    </Panel>
                </TextInput>
            </Grid>

            <StackPanel ux:Name="focusItem" Background="Yellow" Padding="7,0">
                <StackPanel Background="Blue">
                    <Text Value="Lesjaskog" FontSize="22" TextColor="#FDFDFD"/>
                    <Text Value="Lorem Ipsum" TextColor="#FDFDFD88" FontSize="16" />
                </StackPanel>

                <StackPanel Background="Green" Padding="0,5,0,0">
                    <Each Count="7">
                        <Text Color="White">Hello, world!</Text>
                    </Each>
                </StackPanel>

                <WhileFalse Value="{showFocus}">
                    <Change focusItem.Opacity="0"/>
                    <Change focusItem.Height="0"/>
                    <Change focusItem.Visibility="Hidden" Delay="0.2" />
                </WhileFalse>
            </StackPanel>
        </StackPanel>
    </ClientPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 10, 2016, 7:34am UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/2 "2016-07-10T07:34:32Z")

</div>

Hi!

If you want to hide an element in the sense that it doesn’t take up any space in layout, use `Visibility="Collapsed"`

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [July 10, 2016, 8:53am UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/3 "2016-07-10T08:53:55Z")

</div>

Thanks! That worked out perfectly, but is it possible to animate the visibility? With `Visibility="Collapsed"` the element collapses immediatly in stead of moving upwards in a smooth motion.

```auto
<App>
    <ClientPanel>
        <StackPanel Dock="Top" Color="#3D206A" Padding="10">
            <JavaScript>
                var Observable = require('FuseJS/Observable');

                var showFocus = Observable(false);

                module.exports = {
                    showFocus: showFocus
                }
            </JavaScript>

            <Grid Columns="1*,30" Alignment="Top" Height="60" Color="Red" ux:Name="searchBar">
                <TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
                    <Panel Dock="Bottom">
                        <Rectangle Height="1" Width="100%" Color="White"/>
                    </Panel>
                </TextInput>
            </Grid>

            <StackPanel ux:Name="focusItem" Background="Yellow" Padding="7,0">
                <StackPanel Background="Blue">
                    <Text Value="Lesjaskog" FontSize="22" TextColor="#FDFDFD"/>
                    <Text Value="Lorem Ipsum" TextColor="#FDFDFD88" FontSize="16" />
                </StackPanel>

                <StackPanel Background="Green" Padding="0,5,0,0">
                    <Each Count="7">
                        <Text Color="White">Hello, world!</Text>
                    </Each>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </ClientPanel>

    <Switch>
        <WhileFalse>
            <Change focusItem.Opacity="0" Duration=".5" Easing="CubicOut" />
            <Change focusItem.Height="0" Duration=".5" Easing="CubicOut" />
            <Change focusItem.Visibility="Collapsed" Delay="0.5" Duration=".2" />
        </WhileFalse>
    </Switch>
</App>

```

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 10, 2016, 9:37am UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/4 "2016-07-10T09:37:19Z")

</div>

Use `LayoutAnimation` to animate layout changes. E.g. `Set` the `Height` to 0 (don’t use `Change`), then use a `LayoutAnimation` with `Resize` to animate the change.

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [July 10, 2016, 11:31am UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/5 "2016-07-10T11:31:35Z")

</div>

Care to give an example? I’ve been playing around for a bit, but I can’t seem to make it work. This is what I got at the moment:

```auto
<App>
    <ClientPanel>
        <StackPanel Dock="Top" Color="#3D206A" Padding="10">
            <JavaScript>
                var Observable = require('FuseJS/Observable');

                var showFocus = Observable(false);

                module.exports = {
                    showFocus: showFocus
                }
            </JavaScript>

            <Grid Columns="1*,30" Alignment="Top" Height="60" Color="Red" ux:Name="searchBar">
                <TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
                    <Panel Dock="Bottom">
                        <Rectangle Height="1" Width="100%" Color="White"/>
                    </Panel>
                </TextInput>
            </Grid>

            <StackPanel ux:Name="focusItem" Background="Yellow" Padding="7,0">
                <StackPanel Background="Blue">
                    <Text Value="Lesjaskog" FontSize="22" TextColor="#FDFDFD"/>
                    <Text Value="Lorem Ipsum" TextColor="#FDFDFD88" FontSize="16" />
                </StackPanel>

                <StackPanel Background="Green" Padding="0,5,0,0">
                    <Each Count="7">
                        <Text Color="White">Hello, world!</Text>
                    </Each>
                </StackPanel>

                <LayoutAnimation>
                    <Resize Y="1" RelativeTo="LayoutChange" Duration="0.5"/>
                </LayoutAnimation>
            </StackPanel>
        </StackPanel>
    </ClientPanel>

    <Switch Value="true">
        <WhileFalse>
            <Set focusItem.Height="0" Delay=".2" />
            <Change focusItem.Opacity="0" Duration=".5" Easing="CubicOut" />
            <Change focusItem.Visibility="Collapsed" Delay="0.5" />
        </WhileFalse>
    </Switch>
</App>

```

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [July 10, 2016, 3:14pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/6 "2016-07-10T15:14:33Z")

</div>

So I figured it out - the `LayoutAnimation` tag was on the wrong place. But as we’re now using `Set` for the height. How would I reset this in a good way? I don’t like setting static values for the height.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 10, 2016, 3:51pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/7 "2016-07-10T15:51:33Z")

</div>

You can use `Change` with a zero/unspecified `Duration` for the same effect.

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [July 10, 2016, 4:04pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/8 "2016-07-10T16:04:37Z")

</div>

```auto
<App>
    <ClientPanel>
        <StackPanel Dock="Top" Color="#3D206A" Padding="10">
            <JavaScript>
                var Observable = require('FuseJS/Observable');

                var showFocus = Observable(false);

                module.exports = {
                    showFocus: showFocus
                }
            </JavaScript>

            <Grid Columns="1*,30" Alignment="Top" Height="60" Color="Purple" ux:Name="searchBar">
                <TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
                    <Panel Dock="Bottom">
                        <Rectangle Height="1" Width="100%" Color="White"/>
                    </Panel>
                </TextInput>
            </Grid>

            <StackPanel ux:Name="focusItem" Background="Yellow" Padding="7,0">
                <StackPanel Background="Blue">
                    <Text Value="Lesjaskog" FontSize="22" TextColor="#FDFDFD"/>
                    <Text Value="Lorem Ipsum" TextColor="#FDFDFD88" FontSize="16" />
                </StackPanel>

                <StackPanel Background="Green" Padding="0,5,0,0">
                    <Each Count="7">
                        <Text Color="White">Hello, world!</Text>
                    </Each>
                </StackPanel>

            </StackPanel>
            <LayoutAnimation>
                <Resize Y="1" RelativeTo="LayoutChange" Duration=".1" Easing="CubicOut"/>
            </LayoutAnimation>
        </StackPanel>
    </ClientPanel>

    <Switch Value="true">
        <WhileFalse>
            <Change focusItem.Height="0" />
            <Change focusItem.Opacity="0" Duration=".2" Easing="CubicOut" />
        </WhileFalse>
    </Switch>
</App>

```

Like this? That does not seem to work.

---

<div class="post-metadata">

**Author:** ![Anders\_Lassen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/anders_lassen/32/522_2.png) [@Anders\_Lassen](https://forums.fusetools.com/u/Anders_Lassen)\
**Post date:** [July 10, 2016, 4:28pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/9 "2016-07-10T16:28:14Z")

</div>

The `LayoutAnimation` must be inside the element you want to animate, i.e. the `focusItem` in this case.

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [July 10, 2016, 4:31pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/10 "2016-07-10T16:31:02Z")

</div>

I’ve tried that too. But the purple element still won’t hide.

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [July 12, 2016, 6:12am UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/11 "2016-07-12T06:12:24Z")

</div>

Any suggestions to what I might try?

---

<div class="post-metadata">

**Author:** ![Jo\_Emil\_Holen](https://avatars.discourse-cdn.com/v4/letter/j/ecd19e/32.png) [@Jo\_Emil\_Holen](https://forums.fusetools.com/u/Jo_Emil_Holen)\
**Post date:** [July 15, 2016, 6:49pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/12 "2016-07-15T18:49:33Z")

</div>

I’ve tried implementing `LayoutAnimation`, but I’m still not getting the behaviour I want to have. Though, using `<Set active.Height="0" />` in stead of `<Change active.Height="0" />` gives the behaviour I want, but in stead I don’t have the ability to easily reset the size that I have when using `Change`.

```auto
<App>
  <JavaScript>
         var Observable = require('FuseJS/Observable');

         var showFocus = Observable(true);

         module.exports = {
             showFocus: showFocus
         }
   </JavaScript>
  <ClientPanel>
    <StackPanel Dock="Top" Color="#3D206A" Padding="10">
        <Grid Columns="1*,30" Alignment="Top" Height="60" Color="Red">

          <TextInput ActionStyle="Search" PlaceholderText="Søk" Padding="8" TextColor="#FDFDFD" PlaceholderColor="#FDFDFD88" CaretColor="#FDFDFD88" FontSize="20">
            <Panel Dock="Bottom">
                   <Rectangle Height="1" Width="100%" Color="White"/>
            </Panel>
          </TextInput>

          <Panel HitTestMode="LocalBoundsAndChildren" Clicked="{clickHandler}">
              <WhilePressed>
                  <Change Target="pressed.Opacity" Value="0.5" Duration=".1" Easing="QuadraticInOut" />
                  <Change Target="pressed.Height" Value="50" Duration=".1" Easing="QuadraticInOut" />
                  <Change Target="pressed.Width" Value="50" Duration=".1" Easing="QuadraticInOut" />
              </WhilePressed>
              <Grid Rows="7,7,7" Alignment="VerticalCenter">
                  <Circle Color="#FDFDFD" Width="4" Height="4"/>
                  <Circle Color="#FDFDFD" Width="4" Height="4"/>
                  <Circle Color="#FDFDFD" Width="4" Height="4"/>
              </Grid>
              <Circle ux:Name="pressed" Height="0" Width="0" Color="Black" Opacity="0"/>
          </Panel>
        </Grid>

        <DockPanel ux:Name="active" Padding="10, 0" Color="Blue">
          <LayoutAnimation>
            <Resize X="1" Y="1" RelativeTo="LayoutChange" Duration="0.25"/>
          </LayoutAnimation>
          <WhileFalse Value="{showFocus}">
              <Change active.Opacity="0" Duration=".2" Easing="CubicOut" />
              <Change active.Height="0" />
          </WhileFalse>

          <Clicked>
              <Toggle Target="toggle"/>
          </Clicked>

          <Panel ux:Name="activeSummary" Dock="Top" Padding="0, 5">

                <StackPanel ux:Name="focusContent">
                    <DockPanel>
                        <Text Value="{showFocus}" FontSize="22" TextColor="#FDFDFD"/>
                        <Panel Dock="Right">
                            <Text Value="1337" TextColor="#3D206A" Alignment="Center"/>
                            <Rectangle Color="White" CornerRadius="10" Height="20" Width="65"/>
                        </Panel>
                    </DockPanel>
                    <Text Value="er kul" TextColor="#FDFDFD88" FontSize="16" />
                </StackPanel>
            </Panel>

            <Panel ux:Name="activeInfo" Color="#3D206A" Dock="Top" Height="0" Opacity="0" Background="Green">
                <StackPanel>
                    <Each Count="7">
                        <DockPanel>
                            <Text Value="Lorem" TextColor="White"/>
                            <Text Value="Ipsum" TextColor="White" Dock="Right"/>
                        </DockPanel>
                    </Each>
                </StackPanel>

                <WhileTrue ux:Name="toggle" Value="false">
                    <Change Target="activeInfo.Opacity" Value="1" Easing="QuadraticInOut" Duration=".2"/>
                    <Change Target="activeInfo.Height" Value="140" Easing="QuadraticInOut" Duration=".300" DurationBack=".15"/>
                </WhileTrue>
            </Panel>
        </DockPanel>
    </StackPanel>

    <Panel Background="#ccc">
      <Switch Value="{showFocus}" />
    </Panel>
  </ClientPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![Kristian\_Hasselknipp](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/kristian_hasselknipp/32/549_2.png) [@Kristian\_Hasselknipp](https://forums.fusetools.com/u/Kristian_Hasselknipp)\
**Post date:** [July 28, 2016, 12:28pm UTC](https://forums.fusetools.com/t/element-wont-hide-properly/4797/13 "2016-07-28T12:28:33Z")

</div>

Hi Jo Emil!

Your code was a bit tricky to follow, but here is a consice example showing you how it can be done:

```auto
<App>
    <Grid RowCount="2">
    <Panel ux:Name="foo" Color="Red" Height="50%">

        <LayoutAnimation>
            <Resize Vector="1" Duration="0.5" RelativeTo="SizeChange"/>
            <Move Vector="1" Duration="0.5" RelativeTo="PositionChange" />
        </LayoutAnimation>
    </Panel>
    <Switch>
        <WhileTrue>
            <Change foo.Height="0" />
        </WhileTrue>
    </Switch>
    </Grid>
</App>

```