# 2 ScrollViews with equal heights

**URL:** <https://forums.fusetools.com/t/2-scrollviews-with-equal-heights/4828>\
**Category:** How-to Discussions\
**Created:** [April 22, 2016, 9:31pm UTC](https://forums.fusetools.com/t/2-scrollviews-with-equal-heights/4828 "2016-04-22T21:31:11Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jozef](https://avatars.discourse-cdn.com/v4/letter/j/f4b2a3/32.png) [@Jozef](https://forums.fusetools.com/u/Jozef)\
**Post date:** [April 22, 2016, 9:31pm UTC](https://forums.fusetools.com/t/2-scrollviews-with-equal-heights/4828/1 "2016-04-22T21:31:11Z")

</div>

Hi,

I am trying to work on a layout where I’ve got 2 scrollviews that both take up 50% of the screen. Here is my code so far.

```auto
<App Theme="Basic">
    <ClientPanel>
        <JavaScript>
            console.log("INIT");
            var Observable = require("FuseJS/Observable");
            fruits = Observable(
                { name: 'Item1' , color: 'red' },
                { name: 'Item2' , color: 'yellow' },
                { name: 'Item3' , color: 'green' },
                { name: 'Item4', color: 'yellow' },
                { name: 'Item5' , color: 'red' },
                { name: 'Item6' , color: 'yellow' },
                { name: 'Item7' , color: 'green' },
                { name: 'Item8', color: 'yellow' },
                { name: 'Item9' , color: 'red' },
                { name: 'Item10' , color: 'yellow' },
                { name: 'Item11' , color: 'green' },
                { name: 'Item12', color: 'yellow' });

            fruits2 = Observable(
                { name: 'Apple' , color: 'red' },
                { name: 'Lemon' , color: 'yellow' },
                { name: 'Pear' , color: 'green' },
                { name: 'Banana', color: 'yellow' },
                { name: 'Apple' , color: 'red' },
                { name: 'Lemon' , color: 'yellow' },
                { name: 'Pear' , color: 'green' },
                { name: 'Banana', color: 'yellow' });

            searchString = Observable("");

            // ignore case so just convert both to lowercase before comparison
            function stringContainsString(main,filter){
                return main.toLowerCase().indexOf(filter.toLowerCase()) != -1;
            }

            var filteredItems = fruits.where(function(e){
                return Observable(function() {
                    return stringContainsString(e.name, searchString.value);
                });
            });

            module.exports = {
                filteredItems: filteredItems,
                fruits2: fruits2,
                searchString: searchString};
        </JavaScript>

<!-- Page Content -->
<Page Margin="10" >
    <Grid RowCount="2">
        <StackPanel>
            <TextInput Value="{searchString}" PlaceholderText="Search..." />
            <ScrollView>
                <StackPanel Margin="0,0,10,0">
                    <Each Items="{filteredItems}">
                        <Panel Background="#FFF" Margin="5">
                            <StackPanel Orientation="Horizontal" Margin="10">
                                <Text Value="{name}" Alignment="CenterLeft" TextWrapping="NoWrap" Margin="10,0,0,0" FontSize="20" />
                            </StackPanel>
                        </Panel>
                        <Rectangle Height="1" Fill="#cccccc" Margin="5,0,5,0" />
                    </Each>
                </StackPanel>
            </ScrollView>
        </StackPanel>
        <Rectangle Height="10" Fill="#cccccc" />
        <StackPanel Margin="10,0,10,0">
            <FineLine />
            <ScrollView>
                <StackPanel>
                    <Each Items="{fruits2}">
                        <Panel>
                            <StackPanel Orientation="Horizontal">
                                <Text Value="{name}" Alignment="CenterLeft" TextWrapping="NoWrap" Margin="10,0,0,0" />
                                <Text Value="{color}" Alignment="CenterLeft" TextWrapping="NoWrap" Margin="2,0,0,0" />
                            </StackPanel>
                            <Switch Alignment="CenterRight" />
                        </Panel>
                    <Rectangle Height="1" Fill="#cccccc" Margin="5,0,5,0" />
                    </Each>
                </StackPanel>
            </ScrollView>
        </StackPanel>
    </Grid>
</Page>
</ClientPanel>
</App>

```

I’ve tried putting both scrollviews in a grid but then it just ends up overlapping each other like seen in the image here.

 ![file](https://s3.us-east-2.amazonaws.com/fuse-legacy-forum-assets/ZdZLsMLJ2v7G-legacy-files-xKgUO7fpOIqeFq5h-epHHWXt0TIBQCXMyx0EyNDh2.png)

Any tips on how to get the alignment rigt?

---

<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:** [April 28, 2016, 2:10pm UTC](https://forums.fusetools.com/t/2-scrollviews-with-equal-heights/4828/2 "2016-04-28T14:10:49Z")

</div>

Hi!

Thanks for the post, you are not far off from what you want to achieve. But your layout is a bit broken at the moment 🙂 Your `<Grid RowCount="2" />` has 3 children, and there are `ScrollView`s inside `StackPanel`s which can behave strange. When a `StackPanel` layouts it will make the children use as much space as they need in the stacking direction, `ScrollView` will then use all the space it needs instead of just filling the area you want.

I have fixed your code, please have a look at my changes:

```auto
<Grid RowData="1*,Auto,1*">
    <DockPanel>
        <TextInput Dock="Top" Value="{searchString}" PlaceholderText="Search..." />
        <ScrollView Dock="Fill">
            <StackPanel Margin="0,0,10,0">
                <Each Items="{filteredItems}">
                    <Panel Background="#FFF" Margin="5">
                        <StackPanel Orientation="Horizontal" Margin="10">
                            <Text Value="{name}" Alignment="CenterLeft" TextWrapping="NoWrap" Margin="10,0,0,0" FontSize="20" />
                        </StackPanel>
                    </Panel>
                    <Rectangle Height="1" Fill="#cccccc" Margin="5,0,5,0" />
                </Each>
            </StackPanel>
        </ScrollView>
    </DockPanel>
    <Rectangle Height="10" Fill="#cccccc" />
    <DockPanel Margin="10,0,10,0">
        <FineLine Dock="Top" />
        <ScrollView Dock="Fill">
            <StackPanel>
                <Each Items="{fruits2}">
                    <Panel>
                        <StackPanel Orientation="Horizontal">
                            <Text Value="{name}" Alignment="CenterLeft" TextWrapping="NoWrap" Margin="10,0,0,0" />
                            <Text Value="{color}" Alignment="CenterLeft" TextWrapping="NoWrap" Margin="2,0,0,0" />
                        </StackPanel>
                        <Switch Alignment="CenterRight" />
                    </Panel>
                <Rectangle Height="1" Fill="#cccccc" Margin="5,0,5,0" />
                </Each>
            </StackPanel>
        </ScrollView>
    </DockPanel>
</Grid>

```

Please have a look at the [Layout section in the handbook](https://www.fusetools.com/learn/fuse#layout) if you are unsure how the different layout elements work

Let me know if you have any further questions