# Available Space - How to layout?

**URL:** <https://forums.fusetools.com/t/available-space-how-to-layout/6577>\
**Category:** How-to Discussions\
**Created:** [September 3, 2016, 2:26am UTC](https://forums.fusetools.com/t/available-space-how-to-layout/6577 "2016-09-03T02:26:16Z")\
**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/6577/1 "2016-09-03T02:26:16Z")

</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:** ![Remi\_Pedersen](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/remi_pedersen/32/432_2.png) [@Remi\_Pedersen](https://forums.fusetools.com/u/Remi_Pedersen)\
**Post date:** [September 5, 2016, 10:15am UTC](https://forums.fusetools.com/t/available-space-how-to-layout/6577/2 "2016-09-05T10:15:23Z")

</div>

Since the StackPanel can grow forever when you add in new children it effectively has unlimited height, which means that there’s nothing to calculate the 70% from for the Rectangle.

The layout you’re going for can instead be done with, for instance, a [DockPanel](https://www.fusetools.com/docs/fuse/controls/dockpanel) or a [Grid](https://www.fusetools.com/docs/fuse/controls/grid).