# ScrollView and Grid

**URL:** <https://forums.fusetools.com/t/scrollview-and-grid/5713>\
**Category:** Bug Reports\
**Created:** [April 18, 2017, 7:28am UTC](https://forums.fusetools.com/t/scrollview-and-grid/5713 "2017-04-18T07:28:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![\_Kobo](https://avatars.discourse-cdn.com/v4/letter/_/f05b48/32.png) [@\_Kobo](https://forums.fusetools.com/u/_Kobo)\
**Post date:** [April 18, 2017, 7:28am UTC](https://forums.fusetools.com/t/scrollview-and-grid/5713/1 "2017-04-18T07:28:54Z")

</div>

Hi guys ,i have to build complex screens using grid system, but i also want these screens to be scrollable.  
Using scrollView with grid cause the ui to be compacted to the top, the ui doesn’t expend itself to the available space.  
Exemple using grid with scrollview:

```auto
<ScrollView>
  <Grid Rows="1*,0.5*,0.5*,2.7*,0.5*">
    <Rectangle Margin="0,10,0,0">
      <Image Height="118" Width="96" File="Assets/parkopoly/illu_sos.png" StretchMode="PixelPrecise"/>
    </Rectangle>
    <Text Value="Oups, que se passe t'il?" Alignment="Center" TextAlignment="Center" FontSize="17" Margin="0,5,0,0"/>
    <Text Value="Quoi qu'il arrive, garde le sourire, ca se passera bien, on est la!" Alignment="Center" TextAlignment="Center" FontSize="14" Margin="20,0,20,0" TextWrapping="Wrap"/>

    <StackPanel ItemSpacing="25" Margin="0,10,0,0">
      <Rectangle Height="44" Margin="20,0,20,0" HitTestMode="LocalBounds" CornerRadius="10">
        <Clicked>
          <Callback Handler="{Avant}" Delay="0.3"/>
          <Scale Factor="0.99" Easing="QuinticIn" Duration="0.3" />
        </Clicked>
        <Text Value="Avant la mission" Alignment="Center" TextColor="#333" TextAlignment="Center" Font="Nuni" FontSize="16"/>
        <Stroke Width="1" Brush="#333"/>
      </Rectangle>
      <Rectangle Height="44" Margin="20,0,20,0" HitTestMode="LocalBounds" CornerRadius="10">
        <Clicked>
          <Scale Factor="0.95" Easing="QuinticIn" Duration="0.1" />
        </Clicked>
        <Text Value="Probleme avec le client" Alignment="Center" TextColor="#333" TextAlignment="Center" Font="Nuni" FontSize="16"/>
        <Stroke Width="1" Brush="#333"/>
      </Rectangle>
      <Rectangle Height="44" Margin="20,0,20,0" HitTestMode="LocalBounds" CornerRadius="10">
        <Clicked>
          <Scale Factor="0.95" Easing="QuinticIn" Duration="0.1" />
        </Clicked>
        <Text Value="Probleme avec le garage" Alignment="Center" TextColor="#333" TextAlignment="Center" Font="Nuni" FontSize="16"/>
        <Stroke Width="1" Brush="#333"/>
      </Rectangle>
      <Rectangle Height="44" Margin="20,0,20,0" HitTestMode="LocalBounds" CornerRadius="10">
        <Clicked>
          <Scale Factor="0.95" Easing="QuinticIn" Duration="0.3" />
        </Clicked>
        <Text Value="Probleme sur la route" Alignment="Center" TextColor="#333" TextAlignment="Center" Font="Nuni" FontSize="16"/>
        <Stroke Width="1" Brush="#333"/>
      </Rectangle>
    </StackPanel>

    <StackPanel ItemSpacing="10" Alignment="Center" Margin="0,0,0,5" Orientation="Horizontal">
      <Circle Height="26" Width="26" Color="#AEDD6B">
        <DropShadow/>
        <Text Value="&#xe0cd;" Alignment="Center" FontSize="18" Font="Icomoon" TextAlignment="Center" TextColor="White" />
      </Circle>
      <Text Value="Nous appeler" FontSize="14" Alignment="Center" TextAlignment="Center">
        <Rectangle Layer="Background" Height="1" Margin="0,20,0,0" Color="#eee"/>
      </Text>
    </StackPanel>
  </Grid>
</ScrollView>

```

Results: [http://prntscr.com/exqjd7](http://prntscr.com/exqjd7)

Without using scrollView the screen is just perfect : [http://prntscr.com/exqk4g](http://prntscr.com/exqk4g)

---

<div class="post-metadata">

**Author:** ![edA-qa\_mort-ora-y](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/eda-qa_mort-ora-y/32/124_2.png) [@edA-qa\_mort-ora-y](https://forums.fusetools.com/u/edA-qa_mort-ora-y)\
**Post date:** [April 18, 2017, 7:59am UTC](https://forums.fusetools.com/t/scrollview-and-grid/5713/2 "2017-04-18T07:59:04Z")

</div>

The property `Rows="1*,0.5*,0.5*,2.7*,0.5*"` specifies a proportional size for all of the rows. This proportional size is always calculated from the current available space (the size of the parent). Inside a vertical ScrollView though the Grid is not given a fixed size, it is requested for it’s size so the ScrollView knows what area it needs to scroll. This means the proportional rows have no basis to assing their size, thus ending up as zero-size.

Basic rule: you can’t have proportional sized, or stretched items, in the the direction of scrolling (ScrollView) or stacking (StackPanel).

If the grid must be auto-sized you should use `Rows="auto,auto,auto,auto,auto"` or simply `DefaultRow="auto"`. Or you can use fixed sizes for the rows.