@openui5/sap.uxap 1.102.1 → 1.103.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.uxap",
-  "version": "1.102.1",
+  "version": "1.103.1",
   "description": "OpenUI5 UI Library sap.uxap",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,9 +14,9 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.f": "1.102.1",
-    "@openui5/sap.m": "1.102.1",
-    "@openui5/sap.ui.core": "1.102.1",
-    "@openui5/sap.ui.layout": "1.102.1"
+    "@openui5/sap.f": "1.103.1",
+    "@openui5/sap.m": "1.103.1",
+    "@openui5/sap.ui.core": "1.103.1",
+    "@openui5/sap.ui.layout": "1.103.1"
   }
 }

package/src/sap/uxap/.library

@@ -3,7 +3,7 @@
 
 	<name>sap.uxap</name>
 	<vendor>SAP SE</vendor>
-	<version>1.102.1</version>
+	<version>1.103.1</version>
 	<copyright>OpenUI5
  * (c) Copyright 2009-2022 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>

package/src/sap/uxap/AnchorBar.js

@@ -489,7 +489,7 @@ sap.ui.define([
 	AnchorBar.prototype._applyHierarchicalSelectMode = function () {
 
 		if (this._sHierarchicalSelectMode === AnchorBarRenderer._AnchorBarHierarchicalSelectMode.Icon) {
-			this._bHideScrollContainer = false;
+			this.$().find(".sapUxAPAnchorBarScrollContainer").show();
 
 			this._oSelect.setWidth("auto");
 			this._oSelect.setAutoAdjustWidth(true);
@@ -497,7 +497,7 @@ sap.ui.define([
 			this._computeBarSectionsInfo();
 
 		} else {
-			this._bHideScrollContainer = true;
+			this.$().find(".sapUxAPAnchorBarScrollContainer").hide();
 
 			this._oSelect.setWidth("100%");
 			this._oSelect.setAutoAdjustWidth(false);
@@ -505,8 +505,6 @@ sap.ui.define([
 		}
 
 		this.$().toggleClass("sapUxAPAnchorBarOverflow", this._sHierarchicalSelectMode === AnchorBarRenderer._AnchorBarHierarchicalSelectMode.Icon);
-
-		this.invalidate();
 	};
 
 	AnchorBar.prototype._adjustSize = function (oEvent) {

package/src/sap/uxap/AnchorBarRenderer.js

@@ -27,9 +27,6 @@ sap.ui.define(["sap/m/ToolbarRenderer", "sap/ui/core/Renderer", "sap/m/BarInPage
 				rm.renderControl(oToolbar._getScrollArrowLeft());
 
 				rm.openStart("div", oToolbar.getId() + "-scrollContainer");
-				if (oToolbar._bHideScrollContainer) {
-					rm.style("display", "none");
-				}
 				// ARIA attributes
 				rm.class("sapUxAPAnchorBarScrollContainer")
 					.openEnd();
@@ -40,9 +37,7 @@ sap.ui.define(["sap/m/ToolbarRenderer", "sap/ui/core/Renderer", "sap/m/BarInPage
 					.attr("aria-label", sap.ui.getCore().getLibraryResourceBundle("sap.uxap").getText("ANCHOR_BAR_ARIA_LABEL"))
 					.openEnd();
 
-				if (!oToolbar._bHideScrollContainer) {
-					AnchorBarRenderer.renderBarItems(rm, oToolbar);
-				}
+				AnchorBarRenderer.renderBarItems(rm, oToolbar);
 
 				rm.close("div");
 

package/src/sap/uxap/BlockBaseMetadata.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 *
 	 * @class
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.1
 	 * @since 1.26
 	 * @alias sap.uxap.BlockBaseMetadata
 	 * @extends sap.ui.core.ElementMetadata

package/src/sap/uxap/ObjectPageAccessibleLandmarkInfo.js

@@ -22,7 +22,7 @@ sap.ui.define(['sap/ui/core/Element', './library'],
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/uxap/ObjectPageDynamicHeaderContent.js

@@ -41,7 +41,7 @@ sap.ui.define([
 		 * @implements sap.uxap.IHeaderContent
 		 *
 		 * @author SAP SE
-		 * @version 1.102.1
+		 * @version 1.103.1
 		 *
 		 * @constructor
 		 * @public

package/src/sap/uxap/ObjectPageDynamicHeaderTitle.js

@@ -42,7 +42,7 @@ sap.ui.define([
 		 * @implements sap.uxap.IHeaderTitle
 		 *
 		 * @author SAP SE
-		 * @version 1.102.1
+		 * @version 1.103.1
 		 *
 		 * @constructor
 		 * @public

package/src/sap/uxap/ObjectPageLayout.js

@@ -21,7 +21,6 @@ sap.ui.define([
 	"./LazyLoading",
 	"./ObjectPageLayoutABHelper",
 	"./ThrottledTaskHelper",
-	"sap/m/ScrollBar",
 	"sap/ui/core/library",
 	"./library",
 	"./ObjectPageLayoutRenderer",
@@ -51,7 +50,6 @@ sap.ui.define([
 	LazyLoading,
 	ABHelper,
 	ThrottledTask,
-	ScrollBar,
 	coreLibrary,
 	library,
 	ObjectPageLayoutRenderer,
@@ -411,9 +409,7 @@ sap.ui.define([
 				/**
 				 * Internal aggregation to hold the reference to the IHeaderContent implementation.
 				 */
-				_headerContent: {type: "sap.uxap.IHeaderContent", multiple: false, visibility: "hidden"},
-
-				_customScrollBar: {type: "sap.ui.core.Control", multiple: false, visibility: "hidden"}
+				_headerContent: {type: "sap.uxap.IHeaderContent", multiple: false, visibility: "hidden"}
 			},
 			events: {
 
@@ -682,6 +678,7 @@ sap.ui.define([
 			bPinnable;
 
 		this._deregisterScreenSizeListener();
+		this._deregisterTitleSizeListener();
 
 		if (this._oLazyLoading) {
 			this._oLazyLoading.destroy();
@@ -907,6 +904,7 @@ sap.ui.define([
 		this._moveHeaderToContentArea();
 		this._scrollTo(0, 0, 0);
 		this._bHeaderExpanded = true;
+		this._adjustHeaderHeights(); // call synchonously (before resize notification) to avoid visual flickering
 		this._updateToggleHeaderVisualIndicators();
 
 		if (this._isHeaderPinnable()) {
@@ -1012,7 +1010,7 @@ sap.ui.define([
 	/**
 	 * Retrieves the list of sections to render initially
 	 * (the list includes the sections to be loaded lazily, as these are empty in the beginning, only their skeleton will be rendered)
-	 * @returns the sections list
+	 * @returns {sap.uxap.ObjectPageSection[]} the sections list
 	 */
 	ObjectPageLayout.prototype._getSectionsToRender = function () {
 		this._adjustSelectedSectionByUXRules();
@@ -1057,7 +1055,7 @@ sap.ui.define([
 	 * (1) the currently <code>selectedSection</code>
 	 * (2) the static configuration for the count of items to preload in <code>sap.uxap._helpers.LazyLoading</code>
 	 *
-	 * @returns the subSections list
+	 * @returns {sap.uxap.ObjectPageSubSection[]} the subSections list
 	 */
 	ObjectPageLayout.prototype._getSectionsToPreloadOnBeforeFirstRendering = function () {
 		var aSectionBases,
@@ -1131,12 +1129,13 @@ sap.ui.define([
 
 		this._bInvalidatedAndNotRerendered = false;
 
-		this._iResizeId = ResizeHandler.register(this, this._onUpdateScreenSize.bind(this));
-
 		this._ensureCorrectParentHeight();
 
 		this._cacheDomElements();
 
+		this._iResizeId = ResizeHandler.register(this, this._onUpdateScreenSize.bind(this));
+		this._iTitleResizeId = ResizeHandler.register(this._$titleArea.get(0), this._adjustTitlePositioning.bind(this));
+
 		if (this._hasDynamicTitle()) {
 			this.addStyleClass("sapUxAPObjectPageHasDynamicTitle");
 		}
@@ -1207,10 +1206,6 @@ sap.ui.define([
 		// (to avoid any scrollbar appearing even for an instance while we snap/unsnap header)
 		this._toggleScrolling(!this._bAllContentFitsContainer);
 
-		if (Device.system.desktop) {
-			this._$opWrapper.on("scroll.OPL", this.onWrapperScroll.bind(this));
-		}
-
 		this._registerOnContentResize();
 
 		this.getHeaderTitle() && this._shiftHeaderTitle();
@@ -1333,46 +1328,6 @@ sap.ui.define([
 		this._oFirstVisibleSubSection = null;
 	};
 
-	ObjectPageLayout.prototype._getCustomScrollBar = function () {
-
-		if (!this.getAggregation("_customScrollBar")) {
-			var oVSB = new ScrollBar(this.getId() + "-vertSB", {
-				scrollPosition: 0,
-				scroll: this.onCustomScrollerScroll.bind(this),
-				visible: false
-			});
-			this.setAggregation("_customScrollBar", oVSB, true);
-		}
-
-		return this.getAggregation("_customScrollBar");
-	};
-
-	ObjectPageLayout.prototype.onWrapperScroll = function (oEvent) {
-		var iScrollTop = Math.max(oEvent.target.scrollTop, 0);
-
-		if (this._getCustomScrollBar()) {
-			if (this.allowCustomScroll === true) {
-				this.allowCustomScroll = false;
-				return;
-			}
-			this.allowInnerDiv = true;
-
-			this._getCustomScrollBar().setScrollPosition(iScrollTop);
-		}
-	};
-
-	ObjectPageLayout.prototype.onCustomScrollerScroll = function (oEvent) {
-		var iScrollTop = Math.max(this._getCustomScrollBar().getScrollPosition(), 0); // top of the visible page
-
-		if (this.allowInnerDiv === true) {
-			this.allowInnerDiv = false;
-			return;
-		}
-		this.allowCustomScroll = true;
-
-		jQuery(this._$opWrapper).scrollTop(iScrollTop);
-	};
-
 	ObjectPageLayout.prototype.setShowOnlyHighImportance = function (bValue) {
 		var bOldValue = this.getShowOnlyHighImportance();
 
@@ -1420,43 +1375,33 @@ sap.ui.define([
 	};
 
 	/**
-	 * Callback for the end of the scroll triggered from <code>scrollToElement</code>
-	 * of <code>sap.ui.core.delegate.ScrollEnablement</code>.
+	 * Offsets to the required scroll position.
+	 * The offset is the offset of the scroll container from the top of the content container.
 	 *
-	 * Required for Safari and IE11 (where there is no browser automatic scroll adjustment,
-	 * see <code>overflow-anchor</code> CSS property).
-	 *
-	 * The execution of <code>scrollToElement</code> changes the current scroll position,
-	 * so we check if the new scroll position entails subsequent change of the scroll
-	 * container of our page(namely: snapping of the header, which involves removal
-	 * of the anchorBar from the top of the scroll container and placing it
-	 * in the title area above the scroll container instead).
-	 *
-	 * If such a change (namely, removal of the anchorBar from the top of the scroll container)
-	 * should occur, then the content bellow the removed anchorBar will became offset with X pixels,
-	 * where X is the anchorBar height => the element [provided to <code>scrollToElement </code>]
-	 * will be misplaced as a result.
-	 *
-	 * Therefore here we synchronously call the listener to the "scroll" event to check if
-	 * it entails the above snapping and subsequent misplacement => if it entails it,
-	 * then we adjust back the scroll position to correct the misplacement of the scrolled element.
+	 * This is required because <code>sap.ui.code>ScrollEnablement.prototype.scrollToElement</code>
+	 * scrolls the element to the very top of the scroll container, regardless of the scroll container top-padding.
 	 *
 	 * @private
 	 */
 	ObjectPageLayout.prototype._onAfterScrollToElement = function () {
 		var iScrollTop = this._$opWrapper.scrollTop(),
-			bStickyAnchorBarBefore = this._bStickyAnchorBar;
+			bStickyAnchorBarBefore = this._bStickyAnchorBar,
+			iOffset;
 
 		// synchronously call the listener for the "scroll" event, to trigger any pending toggling of the header
 		this._onScroll({ target: { scrollTop: iScrollTop}});
 
-		// if the anchorBar was sticked (removed from the topmost part of the scrollable area) =>
-		// all elements bellow it became offset with X pixels, where X is the anchorBar height =>
-		// the element (target of <code>scrollToElement</code>) was offset respectively =>
-		// adjust the scroll position to ensure the element is back visible (outside scroll overflow)
+		// the <code>this._$contentContainer</code> is offset from the top of the scroll container
+		// with padding, in order to make space for the elements in the title area
+		iOffset = this._$contentContainer.get(0).offsetTop;
+
 		if (this._bStickyAnchorBar && !bStickyAnchorBarBefore && this._$opWrapper.scrollTop() === iScrollTop) {
-			this._$opWrapper.scrollTop(iScrollTop - this.iAnchorBarHeight);
+			// the offset in sticky mode is different from the offset in expanded mode
+			// where the difference is obtained from <code>this._getTitleHeightDelta()</code>
+			iOffset -= this._getTitleHeightDelta();
 		}
+
+		this._$opWrapper.scrollTop(iScrollTop - iOffset);
 	};
 
 	/**
@@ -2201,8 +2146,6 @@ sap.ui.define([
 
 			this._preloadSectionsOnBeforeScroll(oSection);
 
-			this.getHeaderTitle() && this._shiftHeaderTitle();
-
 			iScrollTo += iOffset;
 
 			if (!this._bStickyAnchorBar && this._shouldSnapHeaderOnScroll(iScrollTo)) {
@@ -2289,7 +2232,7 @@ sap.ui.define([
 	 * @param {object} oTargetSection the section
 	 * @private
 	 */
-	ObjectPageLayout.prototype._preloadSectionsOnBeforeScroll = function (oTargetSection) {
+	 ObjectPageLayout.prototype._preloadSectionsOnBeforeScroll = function (oTargetSection) {
 
 		var sId = oTargetSection.getId(),
 			aToLoad;
@@ -2308,22 +2251,28 @@ sap.ui.define([
 				//on desktop we delay the call to have the preload done during the scrolling animation
 				setTimeout(function () {
 					this._connectModelsForSections(aToLoad);
+
+					this._fireSubSectionEnteredViewPortEvent(aToLoad);
 				}.bind(this), 50);
 			} else {
 				//on device, do the preload first then scroll.
 				//doing anything during the scrolling animation may
 				//trouble animation and lazy loading on slow devices.
 				this._connectModelsForSections(aToLoad);
-			}
 
-			aToLoad.forEach(function (subSection) {
-				this.fireEvent("subSectionEnteredViewPort", {
-					subSection: subSection
-				});
-			}, this);
+				this._fireSubSectionEnteredViewPortEvent(aToLoad);
+			}
 		}
 	};
 
+	ObjectPageLayout.prototype._fireSubSectionEnteredViewPortEvent = function (aToLoad) {
+		aToLoad.forEach(function (oSubSection) {
+			this.fireEvent("subSectionEnteredViewPort", {
+				subSection: oSubSection
+			});
+		}, this);
+	};
+
 	/**
 	 * Returns the UI5 ID of the Section that is currently being scrolled.
 	 *
@@ -2632,7 +2581,7 @@ sap.ui.define([
 			});
 		}
 
-		this._updateCustomScrollerHeight(bStickyTitleMode);
+		this._adjustTitlePositioning();
 
 		this._setSectionInfoIsDirty(false);
 
@@ -2678,27 +2627,6 @@ sap.ui.define([
 		return iSectionsContainerHeight + "px";
 	};
 
-	ObjectPageLayout.prototype._updateCustomScrollerHeight = function(bRequiresSnap) {
-
-		if (Device.system.desktop && this.getAggregation("_customScrollBar")) {
-
-			// update content size
-			var iScrollableContentSize = this._computeScrollableContentSize(bRequiresSnap);
-			iScrollableContentSize += this._getStickyAreaHeight(bRequiresSnap);
-			this._getCustomScrollBar().setContentSize(iScrollableContentSize + "px");
-
-
-			// update visibility
-			var bShouldBeVisible = (iScrollableContentSize > Math.ceil(this.iScreenHeight)),
-				bVisibilityChange = (bShouldBeVisible !== this._getCustomScrollBar().getVisible());
-
-			if (bVisibilityChange) {
-				this._getCustomScrollBar().setVisible(bShouldBeVisible);
-				this.getHeaderTitle() && this._shiftHeaderTitle();
-			}
-		}
-	};
-
 	ObjectPageLayout.prototype._computeScrollableContentSize = function(bShouldStick) {
 
 		var iScrollableContentHeight = 0;
@@ -3004,6 +2932,34 @@ sap.ui.define([
 		|| (this._$contentContainer.length && this._$contentContainer.get(0).offsetHeight !== this.iContentHeight);
 	};
 
+	ObjectPageLayout.prototype._adjustTitlePositioning = function (oEvent) {
+		if (!this._$titleArea.length || !this._$opWrapper.length) {
+			return;
+		}
+
+		var oWrapperElement = this._$opWrapper.get(0),
+			oTitleElement = this._$titleArea.get(0),
+			iTitleHeight = oTitleElement.getBoundingClientRect().height,
+			iTitleWidth = oTitleElement.getBoundingClientRect().width;
+
+		// the top area of the scroll container is reserved for showing the title element,
+		// (where the title element is positioned absolutely on top of the scroll container),
+		// therefore
+
+		// (1) add top padding for the area underneath the title element
+		// so that the title does not overlap the content of the scroll container
+		oWrapperElement.style.paddingTop = iTitleHeight + "px";
+
+		// (2) also make the area underneath the title invisible (using clip-path)
+		// to allow usage of *transparent background* of the title element
+		// (otherwise content from the scroll *overflow* will show underneath the transparent title element)
+		oWrapperElement.style.clipPath = 'polygon(0px ' + iTitleHeight + 'px, '
+			+ Math.floor(iTitleWidth) + 'px ' 	+ iTitleHeight + 'px, '
+			+ Math.floor(iTitleWidth) + 'px 0, 100% 0, 100% 100%, 0 100%)';
+
+		this.getHeaderTitle() && this._shiftHeaderTitle();
+	};
+
 	/**
 	 * called when the screen is resize by users. Updates the screen height
 	 * @param oEvent
@@ -3146,7 +3102,7 @@ sap.ui.define([
 		var iReachableScrollTop;
 		iExtraSpaceLength = iExtraSpaceLength || 0;
 
-		iReachableScrollTop = this._oScrollContainerLastState.iScrollableContentLength + iExtraSpaceLength - this._oScrollContainerLastState.iScrollableViewportHeight;
+		iReachableScrollTop = this._oScrollContainerLastState.iScrollableContentLength + iExtraSpaceLength + this._$contentContainer.get(0).offsetTop - this._oScrollContainerLastState.iScrollableViewportHeight;
 		return iReachableScrollTop >= oRequiredScrollTop;
 	};
 
@@ -3172,6 +3128,17 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	 * removes listener for title-area resize
+	 * @private
+	 */
+	 ObjectPageLayout.prototype._deregisterTitleSizeListener = function () {
+		if (this._iTitleResizeId) {
+			ResizeHandler.deregister(this._iTitleResizeId);
+			this._iTitleResizeId = null;
+		}
+	};
+
 	/**
 	 * called when the user scrolls on the page
 	 * @param oEvent
@@ -3785,6 +3752,7 @@ sap.ui.define([
 			}
 
 			this._adjustHeaderBackgroundSize();
+			this._adjustTitlePositioning();
 
 			Log.info("ObjectPageLayout :: adjustHeaderHeight", "headerTitleHeight: " + this.iHeaderTitleHeight + " - headerTitleStickiedHeight: " + this.iHeaderTitleHeightStickied + " - headerContentHeight: " + this.iHeaderContentHeight);
 		} else {
@@ -3892,6 +3860,7 @@ sap.ui.define([
 	 * Retrieve the current header design that was defined in the headerTitle if available
 	 *
 	 * @private
+	 * @returns {sap.uxap.ObjectPageHeaderDesign}
 	 */
 	ObjectPageLayout.prototype._getHeaderDesign = function () {
 		var oHeader = this.getHeaderTitle(),
@@ -3907,6 +3876,7 @@ sap.ui.define([
 	 * Gets only the visible sections
 	 *
 	 * @private
+	 * @returns {sap.uxap.ObjectPageSection[]}
 	 */
 
 	ObjectPageLayout.prototype._getVisibleSections = function () {
@@ -4066,6 +4036,7 @@ sap.ui.define([
 	 * Lazy loading of the _headerContent aggregation
 	 *
 	 * @private
+	 * @returns {sap.uxap.IHeaderContent}
 	 */
 	ObjectPageLayout.prototype._getHeaderContent = function () {
 		return this.getAggregation("_headerContent");
@@ -4116,7 +4087,8 @@ sap.ui.define([
 	};
 
 	ObjectPageLayout.prototype._hasVerticalScrollBar = function () {
-		return (this._getCustomScrollBar().getVisible() === true);
+		var oWrapperElement = this._$opWrapper.length && this._$opWrapper.get(0);
+		return oWrapperElement && (oWrapperElement.scrollHeight > oWrapperElement.offsetHeight);
 	};
 
 	ObjectPageLayout.prototype._shiftHeaderTitle = function () {
@@ -4124,7 +4096,7 @@ sap.ui.define([
 		var oShiftOffsetParams = this._calculateShiftOffset(),
 			sDirection = oShiftOffsetParams.sStyleAttribute,
 			sPixels = oShiftOffsetParams.iMarginalsOffset;
-		this.$().find(".sapUxAPObjectPageHeaderTitle").css("padding-" + sDirection, sPixels + "px");
+		this.$().find(".sapUxAPObjectPageHeaderTitle").css(sDirection, sPixels + "px");
 	};
 
 	/**

package/src/sap/uxap/ObjectPageLayoutRenderer.js

@@ -73,11 +73,6 @@ sap.ui.define(["sap/ui/Device"],
 			oRm.accessibilityState(oControl, oControl._formatLandmarkInfo(oLandmarkInfo, "Root"));
 			oRm.openEnd();
 
-			// custom scrollbar
-			if (Device.system.desktop) {
-				oRm.renderControl(oControl._getCustomScrollBar());
-			}
-
 			// Header
 			oRm.openStart(sHeaderTag, oControl.getId() + "-headerTitle");
 			if (!bHeaderRoleSet) {

package/src/sap/uxap/ObjectPageLazyLoader.js

@@ -37,7 +37,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 *
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/uxap/changeHandler/AddIFrameObjectPageLayout.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @constructor
 	 * @alias sap.uxap.changeHandler.AddIFrameObjectPageLayout
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.1
 	 * @since 1.75
 	 * @experimental Since 1.75
 	 */

package/src/sap/uxap/changeHandler/MoveObjectPageSection.js

@@ -13,7 +13,7 @@ sap.ui.define(["sap/ui/fl/changeHandler/MoveControls", "sap/ui/core/Core", "sap/
 	 * @constructor
 	 * @alias sap.uxap.changeHandler.MoveObjectPageSection
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.1
 	 * @experimental Since 1.54
 	 */
 

package/src/sap/uxap/changeHandler/RenameObjectPageSection.js

@@ -21,7 +21,7 @@ sap.ui.define([
 	 * @constructor
 	 * @alias sap.uxap.changeHandler.RenameObjectPageSection
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.1
 	 * @experimental Since 1.50
 	 */
 

package/src/sap/uxap/designtime/ObjectPageLayout.designtime.js

@@ -195,10 +195,6 @@ function(
 					return ["sections", "_anchorBar", "headerContent"];
 				}
 			}
-		}, {
-			domRef : function(oElement) {
-				return oElement.$("vertSB-sb").get(0);
-			}
 		}],
 		templates: {
 			create: "sap/uxap/designtime/ObjectPageLayout.create.fragment.xml"

package/src/sap/uxap/library.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @namespace
 	 * @alias sap.uxap
 	 * @author SAP SE
-	 * @version 1.102.1
+	 * @version 1.103.1
 	 * @since 1.36
 	 * @public
 	 */
@@ -68,7 +68,7 @@ sap.ui.define([
 			"sap.uxap.ObjectPageHeaderLayoutData",
 			"sap.uxap.ObjectPageLazyLoader"
 		],
-		version: "1.102.1",
+		version: "1.103.1",
 		extensions: {
 			flChangeHandlers: {
 				"sap.uxap.ObjectPageHeader": "sap/uxap/flexibility/ObjectPageHeader",

package/src/sap/uxap/themes/base/ObjectPageHeader.less

@@ -233,6 +233,15 @@ html[data-sap-ui-browser^=ie] .sapUxAPObjectPageHeaderObjectImageContainerSub >
 	padding-bottom: 0;
 }
 
+.sapUxAPObjectPageHeaderTitle {
+	position: absolute;
+	padding-right: 0px;
+	top: 0;
+	right: 0;
+	left: 0;
+	z-index: 2;
+}
+
 .sapUxAPObjectPageHeaderTitleArrow {
 	vertical-align: top;
 	white-space: nowrap;