Bottom toolbar cutoff

Does anyone know how to fix the bottom toolbar from being partially cut off on iPhone 13?  It looks fine on Android.  This is my xaml:

            <Border Style="{StaticResource CardFrameStyle}" Margin="10" VerticalOptions="Fill" HorizontalOptions="Fill">

                <Grid RowDefinitions="Auto,*,Auto">


                    <!-- Header Controls -->

                    <Border Grid.Row="0"

                            Stroke="{StaticResource AccentShadow}"

                            StrokeThickness="1"

                            Background="{StaticResource CardBackground}"

                            Padding="10"

                            Margin="0,0,0,10"

                            Shadow="{StaticResource LightCardShadow}">

                        <Border.StrokeShape>

                            <RoundRectangle CornerRadius="10" />

                        </Border.StrokeShape>

                        <Grid ColumnDefinitions="Auto,*,Auto,Auto,Auto" ColumnSpacing="10">

                            <!-- Choose File Label -->

                            <Label Grid.Column="0"

                                   Text="Choose File"

                                   VerticalOptions="Center"

                                   Style="{StaticResource BaseLabelStyle}" />


                            <!-- Spacer -->

                            <BoxView Grid.Column="1"

                                     BackgroundColor="Transparent" />


                            <!-- Open File Button -->

                            <Button Grid.Column="2"

                                    ImageSource="{StaticResource OpenFileIconImageSource}"

                                    Command="{Binding OpenDocumentCommand}"

                                    BackgroundColor="Transparent"

                                    VerticalOptions="Center" />


                            <!-- Save File Button -->

                            <Button Grid.Column="3"

                                    ImageSource="{StaticResource SaveFileIconImageSource}"

                                    Command="{Binding SaveCommand}"

                                    IsVisible="{Binding IsRegistered}"

                                    BackgroundColor="Transparent"

                                    VerticalOptions="Center" />


                            <!-- Close File Button -->

                            <Button Grid.Column="4"

                                    ImageSource="{StaticResource CloseFileIconImageSource}"

                                    Command="{Binding CloseCommand}"

                                    BackgroundColor="Transparent"

                                    VerticalOptions="Center" />

                        </Grid>

                    </Border>


                    <!-- PDF Viewer -->

                    <syncfusion:SfPdfViewer Grid.Row="1"

                                            Margin="0,10,0,0"

                                            DocumentSource="{Binding PdfDocumentStream}"

                                            Loaded="OnPdfViewerLoaded" />

                </Grid>

            </Border>

Image_7299_1744988135466


10 Replies

BS Bharathi Selvam Syncfusion Team April 21, 2025 07:17 PM UTC

Hi Phill,

Thank you for contacting Syncfusion support.

We have created a sample based on the code snippet you provided to replicate the issue, "Bottom toolbar icons being cut off or misaligned in the PDF Viewer." However, we were unable to reproduce the issue on our end.

Please find attached the sample and a screenshot demonstrating the results from our testing. We kindly request you to review the sample and let us know if any specific steps might have been missed during our reproduction process.

Additionally, we have previously encountered a similar issue with another toolbar. Upon further analysis, we found that the misalignment was caused by a breaking change introduced in Microsoft.Maui.Controls version 9.0.50. This issue does not occur in version 9.0.40 or earlier. Our current release is based on version 9.0.14, which has been thoroughly tested across various scenarios. As a workaround, we recommend using version 9.0.14 for a more stable experience.

Could you please try testing your application with Microsoft.Maui.Controls 9.0.14 and let us know if the issue persists?

Please share the following details to analyze this issue further and assist you with a better solution:

  •  modified version of the sample, if available
  • Confirmation on whether the issue occurs with Microsoft.Maui.Controls 9.0.14
  • Any custom styling applied (e.g., padding, margin, etc.)
  • Exact steps to reproduce the issue
  • Device details (as the issue may be device-specific)
  • The versions of the .NET MAUI packages used (e.g., Microsoft.Maui.Compatibility, Microsoft.Maui.Controls)
  • Any other relevant information that might help in our investigation

We look forward to your response.

Regards,
Bharathi S


Attachment: PDFViewerDemo_4c211d56.zip


PH Phill April 22, 2025 12:28 AM UTC

Thank you for the quick reply.  Some more details:

  • Confirmation on whether the issue occurs with Microsoft.Maui.Controls 9.0.14 -- Yes it works 
  • Using CommunityToolkit.Maui" Version="11.2.0"
  • "CommunityToolkit.Maui.Core" Version="11.2.0"

    "CommunityToolkit.Mvvm" Version="8.4.0"

    "Microsoft.Maui.Controls" Version="9.0.60"

    "Microsoft.Maui.Controls.Compatibility" Version="9.0.60"

    "Syncfusion.Maui.PdfViewer" Version="29.1.39" -- Using these it does Not work


I don't use any custom styling.
Also, you can't tap on any of the bottom tool icons to make them work.


PH Phill April 22, 2025 01:46 PM UTC

Here is a sample with the issue.


Attachment: Choose_PDF_From_List_8fbd5292.zip


BS Bharathi Selvam Syncfusion Team April 22, 2025 04:04 PM UTC

Hi Phill,

Thank you for sharing the sample and details. We were able to replicate the issue “Bottom toolbar icons being cut off or misaligned in the PDF Viewer“ using your sample. We are currently in the process of validating the issue and will provide more details once completed the validation.

Regards,

Bharathi S



BS Bharathi Selvam Syncfusion Team April 24, 2025 05:26 PM UTC

Hi Phill,

After further analysis, we found that the alignment issue is caused by a breaking change in Microsoft.Maui.Controls.Compatibility introduced in the recent version 9.0.50. The issue does not occur in version 9.0.40 and earlier. To resolve this, please downgrade to version 9.0.40 or below, which is fully compatible with our PDF Viewer.

Regards,

Bharathi S



PH Phill May 22, 2025 04:13 PM UTC

Hello  Bharathi,

Just following up, is this on the list to be fixed?  The issue is back even though I have not changed the  Microsoft.Maui.Controls.Compatibility version.

Thanks,



BS Bharathi Selvam Syncfusion Team May 23, 2025 05:34 PM UTC

Hi Phill,

Thanks for the update. As mentioned earlier, the issue “Bottom toolbar icons being cut off or misaligned in the PDF Viewer” is caused by a breaking change introduced in version 9.0.50 of Microsoft.Maui.Controls and Microsoft.Maui.Controls.Compatibility packages. We are currently validating this issue and will share more details once the validation is complete.

Regards,
Bharathi S



BS Bharathi Selvam Syncfusion Team June 20, 2025 01:58 PM UTC

Hi Phill,


Thank you for your patience. After further investigation and thorough analysis, we identified that the issue of the "Bottom toolbar icons being cut off or misaligned in the PDF Viewer" is related to our dependent library and it has been fixed internally. The fix is scheduled to be included in our upcoming weekly release on July 1, 2025.


Disclaimer: “Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.”


Regards,

Bharathi S



BS Bharathi Selvam Syncfusion Team July 1, 2025 02:02 PM UTC

Hi Phill,

Sorry for the inconvenience caused. The weekly release has been postponed to tomorrow, so we will provide the fix for the issue, ”Bottom toolbar icons being cut off or misaligned in the PDF Viewer” by July 2, 2025. 

Regards,

Bharathi S



BS Bharathi Selvam Syncfusion Team July 2, 2025 11:23 AM UTC

Hi Phill,

We have resolved the issue “Bottom toolbar icons being cut off or misaligned in the PDF Viewer” and now the fix for the issue is available in our latest weekly NuGet 30.1.38.

Please find our latest Weekly NuGet:

https://www.nuget.org/packages/Syncfusion.Maui.PdfViewer/30.1.38

Root cause details:

When bottom toolbar items exceed the available width and scrolling is enabled, the view's layout bounds fail to reset automatically. This results in cropped and misaligned elements. We resolve this issue, by reset the bounds when scrolling is activated.

Regards,

Bharathi S


Loader.
Up arrow icon