Why only part of the second element in stacklayout is visible?

Question

I have a top level StackLayout which includes a StackLayout and a Grid. The inner StackLayout contains a label and a ScrollView. The ScrollView has only a StackLayout which is dynamically filled with a custom layout.

   <StackLayout Spacing="10">
        <StackLayout Spacing="10" Margin="0" VerticalOptions="FillAndExpand">
            <Label Margin="20,20,20,0" TextColor="#FF9800" Text="ALERTS" FontSize="13">
                <Label.FontFamily>
                    <OnPlatform x:TypeArguments="x:String">
                        <On Platform="iOS" Value="WorkSans-Bold" />
                        <On Platform="Android" Value="Fonts/WorkSans-Bold.ttf#WorkSans-Bold" />
                    </OnPlatform>
                </Label.FontFamily>
            </Label>               
            <ScrollView Orientation="Horizontal" VerticalOptions="CenterAndExpand">
                <StackLayout Orientation="Horizontal" x:Name="ActiveGroups" Margin="15,0,0,0" />   <!-- this will be filled with the below custom layout -->                  
            </ScrollView>
        </StackLayout>

        <Grid VerticalOptions="FillAndExpand" BackgroundColor="#355466">
            <Grid.RowDefinitions>
                <RowDefinition Height="auto" />
                <RowDefinition Height="*" />
            </Grid.RowDefinitions>
             ........
         </Grid>
    </StackLayout>

The custom layout is a StackLayout that contains a Grid which has two rows for a StackLayout and a Label, as shown below. On some devices, the entire content of the Grid is visible. But on smaller devices, the label is not visible, and even the StackLayout of the Grid is not all visible. How can I solve this problem, that is, make them look the same on all devices?

 <StackLayout  Padding="0" HeightRequest="100" WidthRequest="70" VerticalOptions="CenterAndExpand" >
        <Grid Margin="0" Padding="0" VerticalOptions="Start">
            <Grid.RowDefinitions>
                <RowDefinition Height="67" />
                <RowDefinition Height="10" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="70" />
            </Grid.ColumnDefinitions>

            <StackLayout Grid.Row="0" Grid.Column="0" HeightRequest="67" WidthRequest="70">
                <Frame  CornerRadius="3" IsClippedToBounds="True" HasShadow="False" HeightRequest="70" WidthRequest="70" Padding="3">
                    <StackLayout HeightRequest="60" WidthRequest="60"  Margin="0" Padding="0" Spacing="0">
                        <Frame CornerRadius="2"  IsClippedToBounds="True"  HasShadow="False" Padding="0"  x:Name="IconStack">
                            <StackLayout  BackgroundColor="{Binding Color}" WidthRequest="60" MinimumWidthRequest="60" HeightRequest="60">
                                <Label FontSize="28" Text="{Binding Initials}" HeightRequest="56" WidthRequest="60" Margin="0,10,0,0" Padding="0" TextColor="White" HorizontalOptions="Center" VerticalOptions="CenterAndExpand" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" MaxLines="1" x:Name="InitialsLabel">
                                    <Label.FontFamily>
                                        <OnPlatform x:TypeArguments="x:String">
                                            <On Platform="iOS" Value="WorkSans-Bold" />
                                            <On Platform="Android" Value="Fonts/WorkSans-Bold.ttf#WorkSans-Bold" />
                                        </OnPlatform>
                                    </Label.FontFamily>
                                </Label>
                                <Label BackgroundColor="{Binding GroupColor}" WidthRequest="60" HeightRequest="4" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand"/>
                            </StackLayout>
                        </Frame>
                    </StackLayout>
                </Frame>
            </StackLayout>
            <Label Grid.Row="1" Grid.Column="0" Margin="0,-5,0,0" Padding="5,0,0,0" BackgroundColor="Transparent" Text="{Binding Name}" FontSize="10" VerticalOptions="Center" MaxLines="1" TextColor="White" LineBreakMode="TailTruncation"/>
     </Grid>
 </StackLayout>

Answer 1

To solve this problem, I had to dynamically change the height based on device information. I was hoping for a better solution, but this is still acceptable.