Issue with Overlapping Header Elements in an SAPUI5 Object Page

[PabloCastano]

Hi everyone,

I'm developing an SAPUI5 application that uses the sap.uxap.ObjectPageLayout control to display details. However, I've noticed that the header elements are rendered in a disorganized manner, with some of them overlapping.

I've already verified the following:

• The sap.uxap library is correctly included in the bootstrap (along with sap.m and sap.ui.layout).
• My root view is structured using a standard <App> (sap.m.App), so I don't believe that's causing the issue.
• Within the Object Page, I've configured both the headerTitle and headerContent using different layouts (such as FlexBox, VBox, HorizontalLayout, etc.), but the overlapping issue still persists.

Below is the relevant XML code for my view:

<mvc:View
    xmlns:table="sap.ui.table"
    controllerName="com.controller.ContactDetail"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    xmlns:smartFilterBar="sap.ui.comp.smartfilterbar"
    xmlns:smartTable="sap.ui.comp.smarttable"
    xmlns:f="sap.f"
    xmlns:layout="sap.ui.layout"
    xmlns:ux="sap.uxap"
    xmlns:core="sap.ui.core"
    xmlns:form="sap.ui.layout.form"
    xmlns:tnt="sap.tnt"
    height="100%"
>
    <ux:ObjectPageLayout
        id="ObjectPageLayout"
        showTitleInHeaderContent="true"
        upperCaseAnchorBar="false"
        showFooter="{= ${roleModel>/edit} }"
    >
        <ux:headerTitle>
            <ux:ObjectPageDynamicHeaderTitle>
                <ux:breadcrumbs>
                    <Breadcrumbs id="breadcrumbsId" currentLocationText="Object Page Example" >
                        <Link text="Page 1 a very long link" press="handleLink1Press"/>
                        <Link text="Page 2 long link" press="handleLink2Press"/>
                    </Breadcrumbs>
                </ux:breadcrumbs>

                <ux:expandedHeading>
                    <HBox>
                        <Title text="Denise Smith" wrapping="true"/>
                        <ObjectMarker type="Favorite" class="sapUiTinyMarginBegin"/>
                    </HBox>
                </ux:expandedHeading>

                <ux:snappedHeading>
                    <FlexBox fitContainer="true" alignItems="Center">
                        <Avatar src="./test-resources/sap/uxap/images/imageID_275314.png" class="sapUiTinyMarginEnd"/>
                        <Title text="Denise Smith" wrapping="true"/>
                    </FlexBox>
                </ux:snappedHeading>

                <ux:expandedContent>
                    <Text text="Senior UI Developer"/>
                </ux:expandedContent>

                <ux:snappedContent>
                    <Text text="Senior UI Developer"/>
                </ux:snappedContent>

                <ux:snappedTitleOnMobile>
                    <Title text="Senior UI Developer"/>
                </ux:snappedTitleOnMobile>

                <ux:actions>
                    <OverflowToolbarButton icon="sap-icon://edit" text="edit header" type="Emphasized" tooltip="edit">
                        <layoutData>
                            <OverflowToolbarLayoutData priority="NeverOverflow"/>
                        </layoutData>
                    </OverflowToolbarButton>
                    <OverflowToolbarButton icon="sap-icon://pull-down" text="show section" type="Emphasized" tooltip="pull-down"/>
                    <OverflowToolbarButton icon="sap-icon://show" text="show state" tooltip="show"/>
                    <Button text="Toggle Footer" press="toggleFooter"/>
                </ux:actions>
            </ux:ObjectPageDynamicHeaderTitle>
        </ux:headerTitle>

        <ux:headerContent>
            <FlexBox wrap="Wrap">
                <Avatar class="sapUiSmallMarginEnd" src="./test-resources/sap/uxap/images/imageID_275314.png" displaySize="L" />
                <layout:VerticalLayout class="sapUiSmallMarginBeginEnd">
                    <Link text="+33 6 4512 5158"/>
                    <Link text="DeniseSmith@sap.com"/>
                </layout:VerticalLayout>
                <layout:HorizontalLayout class="sapUiSmallMarginBeginEnd">
                    <Image src="./test-resources/sap/uxap/images/linkedin.png"/>
                    <Image src="./test-resources/sap/uxap/images/Twitter.png" class="sapUiSmallMarginBegin"/>
                </layout:HorizontalLayout>
                <layout:VerticalLayout class="sapUiSmallMarginBeginEnd">
                    <Label text="Hello! I am Denise and I use UxAP"/>
                    <VBox>
                        <Label text="Achieved goals"/>
                        <ProgressIndicator percentValue="30" displayValue="30%"/>
                    </VBox>
                </layout:VerticalLayout>
                <layout:VerticalLayout class="sapUiSmallMarginBeginEnd">
                    <Label text="San Jose, USA"/>
                </layout:VerticalLayout>
            </FlexBox>
        </ux:headerContent>

        <!-- Rest of the Object Page configuration (sections, footer, etc.) -->

    </ux:ObjectPageLayout>
</mvc:View>

And the root view is defined as follows:

<mvc:View 
    controllerName="com.controller.App"
    displayBlock="true"
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m">
    <App id="app">
    </App>
</mvc:View>

My question:
Even though I have the usual configuration and have included all the necessary libraries, the header elements (both in headerTitle and headerContent) are overlapping or arranged incorrectly.
Has anyone encountered this behavior or know what might be causing it? Any suggestions or solutions to prevent the overlapping of these elements would be greatly appreciated.

Thanks in advance for any help or suggestions!

[Marian_Zeis]

Did you try different UI5 Versions?