# Change Height to Auto

**URL:** <https://forums.fusetools.com/t/change-height-to-auto/6599>\
**Category:** How-to Discussions\
**Created:** [December 18, 2017, 9:07pm UTC](https://forums.fusetools.com/t/change-height-to-auto/6599 "2017-12-18T21:07:52Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![scotty2nd](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@scotty2nd](https://forums.fusetools.com/u/scotty2nd)\
**Post date:** [December 18, 2017, 9:07pm UTC](https://forums.fusetools.com/t/change-height-to-auto/6599/1 "2017-12-18T21:07:52Z")

</div>

Hello Fuse Community,

i have build a modal box that has default width 0% and height 0%.

Now i want it to change it in both directions width to max 400.

That is working great.

But i also want to change height to the space that the elements need (auto).

That is not working.

I get an error in the console when i set height to auto.

How can i achieve a animation to a dynamic height? Has anyone a idear?

Here my is my code so far

```auto
<Panel ux:Class="Modal" Layer="Overlay" >
	<float4 ux:Property="BackgroundColor" />
	<string ux:Property="Headline" />
	<string ux:Property="Title" />

	<Panel ux:Name="ModalBody" Background="{ReadProperty BackgroundColor}" Width="0%" Height="0%" MaxWidth="400" Alignment="Center" ClipToBounds="True">
		<DockPanel>
			<StackPanel Dock="Top" Margin="20, 20, 20, 20">
				<SemiboldText ux:Name="ModalHeadline" Value="{ReadProperty Headline}" TextColor="White" TextAlignment="Center" FontSize="18" Margin="0, 0, 0, 5" />
				<SemiboldText ux:Name="ModalTitel" Value="{ReadProperty Title}" TextColor="White" TextAlignment="Center" FontSize="18" Margin="0, 0, 0, 10" />

				<RegularText ux:Name="ModalMessage" Value="{modal.message}" TextColor="White" TextAlignment="Center" FontSize="14" TextWrapping="Wrap" />
			</StackPanel>

			<StackPanel Dock="Bottom">
				<Rectangle Width="100%" Height="1" Color="#0005"/>

				<Panel ux:Name="OkButton" HitTestMode="LocalBounds" Background="#0003" Height="60" Padding="20">
				    <BoldText ux:Name="OkButtonText" TextColor="White" TextAlignment="Center" FontSize="16">
				    	OK
				    </BoldText>

				    <Tapped>
				    	<Callback Handler="{OkClicked}" />
				    </Tapped>

				    <WhilePressed>
				    	<Change OkButton.Background="#0004" Duration="0.3" Easing="QuarticInOut" />
				    </WhilePressed>
				</Panel>
			</StackPanel>
		</DockPanel>

		<LayoutAnimation>
			<Resize X="1" Y="1" RelativeTo="SizeChange" Easing="BounceIn" Duration=".3" />
			<Move X="1" Y="1" RelativeTo="PositionChange" Easing="BounceIn" Duration=".3" />
		</LayoutAnimation>
	</Panel>

	<JavaScript File="./js/Modal.js" />

	<WhileTrue Value="{modal.visibility}">
		<Change ModalBody.Width="100%" />
		<Change ModalBody.Height="auto" /> // This is not working
		<Change ModalBody.Alignment="Center" />
	</WhileTrue>
</Panel>

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [December 19, 2017, 10:34am UTC](https://forums.fusetools.com/t/change-height-to-auto/6599/2 "2017-12-19T10:34:03Z")

</div>

There is no such thing as `Height="auto"` in Fuse. The layout of elements is determined by a number of factors, and you can read more about it [introduction to layout](https://www.fusetools.com/docs/basics/introduction-to-fuse#introduction-to-layout) and [responsive layout](https://www.fusetools.com/docs/layout/responsive-layout).

Since you are already using a `LayoutAnimation`, your best bet would be to simply change the [LayoutMaster](https://www.fusetools.com/docs/fuse/controls/layoutcontrol/setlayoutmaster_084fadc8) of the overlay, and it will smoothly transition between the states. All you need is two placeholders for the two states.

There’s also a somewhat long [video about LayoutAnimation](https://www.youtube.com/watch?v=r9f0rLYnCJs&t=1610s) where we discuss `LayoutMaster`, so give it a look.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![scotty2nd](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@scotty2nd](https://forums.fusetools.com/u/scotty2nd)\
**Post date:** [December 19, 2017, 9:02pm UTC](https://forums.fusetools.com/t/change-height-to-auto/6599/3 "2017-12-19T21:02:54Z")

</div>

Hey Uldis,

thanks for this reply.

Can you give a small Example for the two placeholder states and the toggeling?

Thanks

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [December 20, 2017, 7:41am UTC](https://forums.fusetools.com/t/change-height-to-auto/6599/4 "2017-12-20T07:41:37Z")

</div>

Sure, here you go:

```auto
<App>
	<WhileTrue ux:Name="moveToBottom">
		<Change theTarget.LayoutMaster="bottomBox" />
	</WhileTrue>

	<Panel ux:Name="theTarget" LayoutMaster="topBox">
		<Clicked>
			<Toggle Target="moveToBottom" />
		</Clicked>
		<LayoutAnimation>
			<Move RelativeTo="PositionChange" Vector="1" Duration="0.3" />
			<Resize RelativeTo="SizeChange" Vector="1" Duration="0.3" />
		</LayoutAnimation>
		<Rectangle CornerRadius="16" Color="#0ff" />
	</Panel>

	<StackPanel Alignment="VerticalCenter">
		<Panel ux:Name="topBox" Width="240" Height="80" Color="#f00a" />
		<Panel ux:Name="bottomBox" Width="80" Height="240" Color="#00fa" />
	</StackPanel>
</App>

```

---

<div class="post-metadata">

**Author:** ![scotty2nd](https://avatars.discourse-cdn.com/v4/letter/s/35a633/32.png) [@scotty2nd](https://forums.fusetools.com/u/scotty2nd)\
**Post date:** [December 20, 2017, 9:32pm UTC](https://forums.fusetools.com/t/change-height-to-auto/6599/5 "2017-12-20T21:32:15Z")

</div>

Hey Uldis,

i played around and maybe i found another solution what do you think about this?

```auto
<Panel ux:Class="Modal" Layer="Overlay" >

	<!-- Default Modal Box -->
	<Panel Color="{modal.color}" Width="100%" MaxWidth="400" Alignment="Center" ClipToBounds="True">
		<DockPanel>
			<StackPanel Dock="Top" Margin="20, 20, 20, 20">
				<SemiboldText ux:Name="ModalHeadline" Value="{modal.headline}" TextColor="White" TextAlignment="Center" FontSize="18" Margin="0, 0, 0, 5" />
				<SemiboldText ux:Name="ModalTitel" Value="{modal.title}" TextColor="White" TextAlignment="Center" FontSize="18" Margin="0, 0, 0, 10" />
				<RegularText ux:Name="ModalMessage" Value="{modal.message}" TextColor="White" TextAlignment="Center" FontSize="14" TextWrapping="Wrap" />
			</StackPanel>

			<StackPanel Dock="Bottom">
				<Rectangle Width="100%" Height="1" Color="#0005"/>

				<Panel ux:Name="OkButton" HitTestMode="LocalBounds" Background="#0003" Height="60" Padding="20">
				    <BoldText ux:Name="OkButtonText" TextColor="White" TextAlignment="Center" FontSize="16">
				    	OK
				    </BoldText>

				    <Tapped>
				    	<Callback Handler="{OkClicked}" />
				    </Tapped>

				    <WhilePressed>
				    	<Change OkButton.Background="#0004" Duration="0.3" Easing="QuarticInOut" />
				    </WhilePressed>
				</Panel>
			</StackPanel>
		</DockPanel>
	</Panel>

	<!-- Modal nicht sichtbar -->
	<WhileFalse Value="{modal.visibility}">
	    <Scale Factor="0" Duration=".3" Easing="BounceIn" />
	</WhileFalse>

    <JavaScript File="./js/Modal.js" />
    
</Panel>

```

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [December 22, 2017, 10:25am UTC](https://forums.fusetools.com/t/change-height-to-auto/6599/6 "2017-12-22T10:25:08Z")

</div>

Whatever works for you is fine, I guess.

As for me, I’d still go with two placeholders, changing `LayoutMaster` and a `LayoutAnimation`.