SfTabView does not respond to the removal of the safe area in Maui

[Gerson Rodriguez]

SfTabView does not respond to the removal of the safe area in Maui, even though the background color is applied, the tab container does not fully expand. However, if the SfTabView is removed, the contents expand within the safe area, as shown in the second picture.

in your experience, could you help me to somehow determine in which tabView occupies the secure area, another container maybe, or another programmatic way that allows me to do it.

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
             xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
             xmlns:inputLayout="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="False"
             BackgroundColor="#FF4B4B"
             NavigationPage.HasNavigationBar="False"
             x:Class="paped.MainPage">

    <Grid BackgroundColor="Gold" IgnoreSafeArea="True">

        <tabView:SfTabView Margin="0,0,0,0" BackgroundColor="DarkBlue" x:Name="tab" TabBarHeight="55" TabBarPlacement="Bottom" IndicatorPlacement="Fill" IndicatorBackground="#FF4B4B" TabWidthMode="Default" TabBarBackground="#bfc5c8">
            <tabView:SfTabView.Items>

                <!-- First-->
                <tabView:SfTabItem ImagePosition="Top" FontAttributes="Bold" FontSize="15" ImageTextSpacing="-3" TextColor="Black" ImageSource="foto.png" Header="Home">
                    <tabView:SfTabItem.Content>
                        <StackLayout Margin="0" Padding="0">
                            <Label BackgroundColor="SeaGreen" HeightRequest="50" Text="PRESION ARTERIAL EN PEDIATRIA" FontSize="18" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" FontAttributes="Bold" TextColor="White" />
                            <StackLayout BackgroundColor="Snow"></StackLayout>
                        </StackLayout>
                    </tabView:SfTabItem.Content>
                </tabView:SfTabItem> 
​
                <tabView:SfTabItem ImagePosition="Top" FontAttributes="Bold" FontSize="15" ImageTextSpacing="-3" TextColor="Black" ImageSource="foto2.png" Header="Info">
                </tabView:SfTabItem>

            </tabView:SfTabView.Items>
        </tabView:SfTabView>

    </Grid>

</ContentPage>

code 2

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:tabView="clr-namespace:Syncfusion.Maui.TabView;assembly=Syncfusion.Maui.TabView"
             xmlns:syncfusion="clr-namespace:Syncfusion.Maui.Buttons;assembly=Syncfusion.Maui.Buttons"
             xmlns:sliders="clr-namespace:Syncfusion.Maui.Sliders;assembly=Syncfusion.Maui.Sliders"
             xmlns:inputLayout="clr-namespace:Syncfusion.Maui.Core;assembly=Syncfusion.Maui.Core"
             xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls"
             ios:Page.UseSafeArea="False"
             BackgroundColor="#FF4B4B"
             NavigationPage.HasNavigationBar="False"
             x:Class="paped.MainPage">

    <Grid BackgroundColor="Gold" IgnoreSafeArea="True">
        <Label Text="ssssssss" VerticalOptions="Start" FontSize="33"></Label>
        <Label Text="ssssssss" VerticalOptions="End" FontSize="33"></Label>
    </Grid>

</ContentPage>

Attachment: Datos_de_Escritorio_72010b68.zip

[Arunachalam Kandasamy Raja]

Hi Gerson Rodriguez,

 

Thanks for reaching out to us.

 

The reported issue is due to a known problem in the framework. Specifically, when content is added inside a scroll-view, the SafeArea is ignored. In our source code, we have used a scroll view for the tab items, which has led to this issue. We have already reported this, along with a replication project, to the framework team for resolution. Please refer to the issue report below for tracking purposes. We will notify you once we receive a solution from the framework team.

 

Issue Report: iOS: UseSafeArea is ignored when root-element is a ScrollView · Issue #15897 · dotnet/maui · GitHub

 

Regards,

Arunachalam K