ObjectPageLayout pin and collapse bar are overlapping

[buch]

Hello experts,

I am facing an issue where my ObjectPageLayout pin and collapse icons are overlapping each other.

The code for this

<f:DynamicPage >
  <f:content>
    <uxap:ObjectPageLayout id="ObjectDetailPageLayout" showTitleInHeaderContent="true" upperCaseAnchorBar="false" useIconTabBar="true" >
      <uxap:headerTitle>
        <uxap:ObjectPageDynamicHeaderTitle>   
          <uxap:breadcrumbs>
            <Breadcrumbs>
              <Link text="{i18n>accelerators}" press="onBackToAccMain" />
              <Link text="{selectAccelerator>/title}" enabled="false"/>             
            </Breadcrumbs>
          </uxap:breadcrumbs>

          <uxap:expandedHeading>
            <Title text="{selectAccelerator>/title}" wrapping="true"/>
          </uxap:expandedHeading>

          <uxap:actions>               
         
            <uxap:ObjectPageHeaderActionButton id="deleteBtn" tooltip="{i18n>delete}" text="{i18n>delete}" press="onDeleteDetail" hideText="false"/>
          </uxap:actions>
        </uxap:ObjectPageDynamicHeaderTitle>   
      </uxap:headerTitle>

      <uxap:headerContent>
        <l:VerticalLayout class="sapUiMediumMarginEnd">
          <Text text="{i18n>id}" class="sapUiTinyMarginBottom"/>
          <Label class="bigLabel" text="{selectAccelerator>/external_id}" />
        </l:VerticalLayout>
        
        <l:VerticalLayout class="sapUiMediumMarginEnd">
          <Text text="{i18n>accelerator.table.variant}" class="sapUiTinyMarginBottom"/>
          <Label class="bigLabel" text="{selectAccelerator>/variant}" />
        </l:VerticalLayout>

        <l:VerticalLayout class="sapUiMediumMarginEnd">
          <Text text="{i18n>accelerator.table.status}" class="sapUiTinyMarginBottom" />
            <l:HorizontalLayout >
              <Text class="bigLabel" text="{selectAccelerator>/status}" >
                <customData>
                  <core:CustomData key="colour" value="{selectAccelerator>/status}" writeToDom="true" />
              </customData>
          
            </l:HorizontalLayout>          
        </l:VerticalLayout>

        <l:VerticalLayout>
          <ObjectAttribute title="{i18n>changedBy}" text="{selectAccelerator>/changedby}"/>
          <ObjectAttribute title="{i18n>changedAt}" text="{selectAccelerator>/changedat}"/>   
        </l:VerticalLayout>
      
      </uxap:headerContent>

      <uxap:sections>
        .....
      </uxap:sections>

  </f:content>
</f:DynamicPage >

Please let me know if you have any suggestions on how to fix this issue

Kind Regards,

Buch

[buch]

The issue was that <uxap:ObjectPageLayout> isnt compatible with <DynamicPage> according to fiori guideline

[former_member221786 · Accepted solution]

Before doing some deep research on the ObjectPageLayout why this is I would suggest you write a little custom css for the Buttons.

There is something messed up with the margins. Both buttons are positioned with "position: absolute" and "left: 50%". Then some (negative and positive) margins have been added to adjust them to each other.

Provide a class for your ObjectPageLayout than something like this should do the trick :

.yourObjectPageLayoutClass .sapFDynamicPage:not(.sapFDynamicPageTitleClickEnabled) .sapFDynamicPageHeaderPinButton {
       margin-left: 0;
}