# Available Space - How to layout?

**URL:** <https://forums.fusetools.com/t/available-space-how-to-layout/3897>\
**Category:** General\
**Created:** [September 3, 2016, 2:26am UTC](https://forums.fusetools.com/t/available-space-how-to-layout/3897 "2016-09-03T02:26:15Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mgleason\_3](https://avatars.discourse-cdn.com/v4/letter/m/35a633/32.png) [@mgleason\_3](https://forums.fusetools.com/u/mgleason_3)\
**Post date:** [September 3, 2016, 2:26am UTC](https://forums.fusetools.com/t/available-space-how-to-layout/3897/1 "2016-09-03T02:26:15Z")

</div>

I’m trying to add vertical progress indicator next to and under some other elements. In the image below, it’s the vertical line, box and “11 Tests” all are gray.

![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/WJ1R3DAxa3Gq-image-1472868371608.png)

Currently, I’m trying to add the vertical line. Using the inspector, I can see that the outer-most StackPanel does take up the vertical space that I expect it to. I was hoping that the `<Rectangle Width="6" Fill="#aaa" Alignment="BottomCenter" Height="70%"/>` in the example below would use 70% of the available space below the 2 `<StackPanel Orientation="Horizontal" >`. But it does not. In fact, it does not show up at all. If I add `Layer="Background"`, then it will take up 70% of the entire available area (ignoring the 2 `<StackPanel Orientation="Horizontal" >`).

I’ve tried surrounding it with StackPanels and number of other things, but unless I specify a height or I add `Layer="Background"`, it doesn’t have any height. Any idea what I’m doing wrong?

```auto
<StackPanel Clicked="{editSets}" Alignment="TopRight" Height="100%" >
  <StackPanel Orientation="Horizontal" >
    <FadeText Value="High:" TextColor="#aaa" Font="RobotoLight" FontSize="12" />
    <FadeText Value="{high}" TextColor="#aaa" Font="RobotoLight" FontSize="12" />
  </StackPanel>
  <StackPanel Orientation="Horizontal" >
    <FadeText Value="Low:" TextColor="#aaa" Font="RobotoLight" FontSize="12" />
    <FadeText Value="{low}" TextColor="#aaa" Font="RobotoLight" FontSize="12" />
  </StackPanel>
  <Rectangle Width="6" Fill="#aaa" Alignment="BottomCenter" Height="70%"/>
</StackPanel>

```

---

<div class="post-metadata">

**Author:** ![Vegard\_Strand\_Lende](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/vegard_strand_lende/32/349_2.png) [@Vegard\_Strand\_Lende](https://forums.fusetools.com/u/Vegard_Strand_Lende)\
**Post date:** [November 29, 2016, 3:59pm UTC](https://forums.fusetools.com/t/available-space-how-to-layout/3897/2 "2016-11-29T15:59:31Z")

</div>

Hi!

Looks like the StackPanels might be causing the issues, since the stack and will always use the needed space for its content.

I think you should try making it with `<RangeControl />` instead. Please have a look at this example:

```auto
<App>

	<RangeControl ux:Class="ProgressBar" >
		<Panel Margin="4" ClipToBounds="true">
			<Rectangle Width="10">
				<Stroke Color="Black" />
			</Rectangle>
			<Rectangle Color="#0cf">
				<Translation Y="1" RelativeTo="Size" ux:Name="_progressTrans" />
			</Rectangle>
		</Panel>
		<ProgressAnimation>
			<Change _progressTrans.Y="0" Duration="1" />
		</ProgressAnimation>
	</RangeControl>

	<DockPanel>
		<JavaScript>
			var Observable = require("FuseJS/Observable");

			var progress = Observable(50);

			module.exports = {
				progress:progress
			};

		</JavaScript>
		<ProgressBar Dock="Right" Value="{progress}" Minimum="0" Maximum="100" />
		<Panel Dock="Fill">
			<Slider Value="{progress}" Minimum="0" Maximum="100" />
		</Panel>
	</DockPanel>
</App>

```