Sidedrawer MainContent height issue in IOS

[Venkata]

Hi Team,

We are facing the height issue  for Sidedrawer maincontent in IOS, as it is showing some space in header and footer for Main Content part and for drawer content part we dont see any space.Could you please look into this issue.

Please find the attached screenshots and document for reference.

Note:Its working fine in Android and the issue in IOS only

Telerik.UI.for.MAUI version:7.0.0

VisualStudio2022: 17.6.4

Thanks

Bhaskar

 

[Didi]

Hello Bhaskar,

The header and footer behavior is only on iOS. We have a feature request to provide an option to remove this area: https://feedback.telerik.com/maui/1610383-sidedrawer-ios-provide-an-option-to-remove-header-and-footer-area-in-the-drawer-content Unit we implement the feature, there is a solution in the public item. 

Regarding the main area, there isn't header and footer. This feature is only in the drawer area for iOS platform. 

Regards,
Didi
Progress Telerik

[Venkata]

Hi Didi,

Thank you for the reply but we are getting space for top and bottom for main content part in IOS only.Could you please check why we are getting space issue in MAUI telerik version.Please find the attached screenshot for reference.

 

Thanks

Bhaskar

[Venkata]

Hi Didi,

When we are using xamarin.forms we didnt face any space issue for main content RadSideDrawer but when we started using MAUI we are getting this space issue .

Thanks

Bhaskar

[Didi]

Hello Bhaskar,

On my side the main content gets the full space. The content is added inside  grid with a default star size.

The example is here. Note that the behavior may occur depending on the layout you use in the main content. There are differences in Xamarin and MAUI layouts, so you cannot expect same behavior. The case you describe seems not related to the SideDrawer Main Content, seems related to the layout used.
Here is the example I tested on my side: https://docs.telerik.com/devtools/maui/controls/sidedrawer/getting-started#define-the-control

Check on your side and let me know the results. Also the iOS device you use for the test.

[Venkata]

Hi Didi,

Its working fine because we are placing only one label in Main content  but we are using multiple widgets in MainContent part,Could you please check our code which we used and able to reproduce the issue or not.Please check the sample project for reference.

Note:if we place the one label we were see full screen in IOS devices but for multiple only we are facing the issue

Thanks

Bhaskar

[Didi]

Hi Bhaskar,

Thank you for the code. 

I tested the code and no issues with SideDrawer main content. the content gets the full area. The behavior you describe is not an issue, you see the bottom color, as this is the color of the Grid background. 

Add a different color to the Main Grid layout and you will notice the change. For example:

 <telerik:RadSideDrawer x:Name="drawer"
                    DrawerLength="200">
     <telerik:RadSideDrawer.MainContent>
         <Grid BackgroundColor="LightCoral">
             <Grid RowSpacing="0" x:Name="gridUser" IsVisible="true">

 

So I am not sure how this behavior is related to the SideDrawer main area. I can suggest you add background color to the layouts you use, to be sure about their position. Image from my test is attached, the main content is displayed as expected.

[Venkata]

Hi Didi,

i am not getting like that with suggested changes .Please find the screenshot for reference.

For Screenshot Telerik-issue1.png- when we put Shell.NavBarIsVisible="False".we will display page like in the screenshot and we use like this in our project.Could you please check like this condiition and able to reproduce or not

For Screenshot Telerik-issue2png- when we put Shell.NavBarIsVisible="True", we wont use like this in our project

Thanks

Bhaskar

[Didi]

Hi Bhaskar,

The behavior you described is related to the Shell navigation bar, not to the SideDrawer control, the control gets the width and height the page provides. For example set width and height to the SideDrawer and you will see the difference.  

Another test, if you remove the shell structure and just use NavigationPage, then the SideDrawer content behaves as expected.

So the described behavior is not related to the SideDrawer control.

 

[Venkata]

Hi Didi,

Please find the attached project  for reference.

Based on screenshot provided by you ,Please check the structure of our page and suggest us  and also if we mentioned Shell.NavBarIsVisible="True" background color is not visible on top of page.Please check the attached project and validate it, suggest us .

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
              NavigationPage.HasNavigationBar="False"
               xmlns:ios="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.iOSSpecific;assembly=Microsoft.Maui.Controls" 
             ios:Page.UseSafeArea="False"
             Shell.NavBarIsVisible="True"
             x:Class="TestTelerik.MainPage"
             xmlns:telerik="http://schemas.telerik.com/2022/xaml/maui" >

Thanks

Bhaskar

[Didi]

Hi Bhaskar,

I think there is a misunderstanding on this case. In general the reported behavior is not related to the SideDrawer control, it is to the shell nav bar.

So when setting Shell.NavBarIsVisible="False" The SideDrawer is position inside the complete page - shell-navbarvisible-false.png. Same behavior happens when you remove the SideDrawer and add Grid layout. 

When Shell.NavBarIsVisible="True", both the grid layout and side drawer do not have top background. This is expected as the place is for the shell navigation bar. As I shared the behavior is related to the shell navigation bar. 

Images are attached.

I hope you understand that the behavior is not related to the Telerik MAUI SideDrawer control. For the test just replace the control with a sample grid layout and test.