Change Height to Auto

How-to Discussions
1

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

<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>
2

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 and responsive layout.

Since you are already using a LayoutAnimation, your best bet would be to simply change the LayoutMaster 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 where we discuss LayoutMaster, so give it a look.

Hope this helps!

3

Hey Uldis,

thanks for this reply.

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

Thanks

4

Sure, here you go:

<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>
5

Hey Uldis,

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

<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>
6

Whatever works for you is fine, I guess.

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