2 ScrollViews with equal heights

[Jozef]

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.

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

Any tips on how to get the alignment rigt?

[Vegard_Strand_Lende]

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 ScrollViews inside StackPanels 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:

<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 if you are unsure how the different layout elements work

Let me know if you have any further questions