We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

NavigationDrawer won't expand vertically to fill entire height on IOS despite DrawerHeight setting

On Android the navigationDrawer can fill the screen if requested, but on iOS simulator there is an area of about 1/4 of the screen that it won't render to, even if navigationDrawer.DrawerHeight is set to something silly like 3000. If you run the code below and click the yellow button, you should observe a cyan header, then beige content that fills the screen vertically. On iOS, the beige area stops and white is visible.

<ContentPage.Content>

        <navigationdrawer:SfNavigationDrawer 
            x:Name="navigationDrawer"
            DrawerWidth ="200"
            BackgroundColor="Black"
            Transition="Push"
            DrawerHeight="3000"
            >

            <navigationdrawer:SfNavigationDrawer.ContentView>
                <Grid x:Name="mainContentView" BackgroundColor="White">
                    <Grid.RowDefinitions>
                        <RowDefinition Height="10*"/>
                        <RowDefinition Height="90*"/>

                    </Grid.RowDefinitions>

                    <StackLayout BackgroundColor="Green" Orientation="Horizontal">

                        <Button 
                                x:Name="burgerButton"
                                HorizontalOptions="Start"
                                Margin="0,0,0,0"
                                VerticalOptions="CenterAndExpand"
                                BackgroundColor="Yellow"
                                Clicked="BurgerButton_Clicked"
                                >

                            <Button.WidthRequest>
                                <OnIdiom x:TypeArguments="x:Double"
                                    Phone="40"
                                    Tablet="70"
                                   />
                            </Button.WidthRequest>

                        </Button>

                    </StackLayout>

                </Grid>

            </navigationdrawer:SfNavigationDrawer.ContentView>

            <navigationdrawer:SfNavigationDrawer.DrawerHeaderView>
                <BoxView BackgroundColor="Aqua"/>
            </navigationdrawer:SfNavigationDrawer.DrawerHeaderView>

            <navigationdrawer:SfNavigationDrawer.DrawerContentView>
                <BoxView BackgroundColor="Beige"/>
            </navigationdrawer:SfNavigationDrawer.DrawerContentView>


        </navigationdrawer:SfNavigationDrawer>
        
      

    </ContentPage.Content>

c#

[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class DrawerTest : ContentPage
{
public DrawerTest ()
{
InitializeComponent ();
}

        private void BurgerButton_Clicked(object sender, EventArgs e)
        {
            navigationDrawer.ToggleDrawer();
        }
    }


2 Replies

NI Nick February 7, 2019 05:12 AM

Can confirm it happens on iOS device builds too. 


MS Mugundhan Saravanan Syncfusion Team February 8, 2019 09:11 AM

Hi Nick,

Greetings from Syncfusion.


We have checked the code snippet provided on your previous update. On ios the FooterView height has not updated. As a workaround we can set the DrawerFooterHeight to 0 as mentioned below.

 
 
<navigationdrawer:SfNavigationDrawer  DrawerFooterHeight="0"> 
 
 

We have prepared a sample for the same, please download it from the link given below.

Sample link: http://www.syncfusion.com/downloads/support/directtrac/general/ze/NavigationDrawerSample58596354

Please let us know if you have any clarification on this.

Regards,
Mugundhan S.
 


Loader.
Live Chat Icon For mobile
Up arrow icon