search

SAP / openui5

OpenUI5 lets you build enterprise-ready web applications, responsive to all devices, running on almost any browser of your choice.
http://openui5.org
Apache License 2.0
2.97k stars 1.24k forks source link

CSS Bug: customHeader with a ShellBar in it creates <header> DOM that overlaps <section> by 8 px. #3899

Open MBenediktM opened 1 year ago

MBenediktM commented 1 year ago

OpenUI5 version: 1.120.1

Browser/version (+device/version): Chrome, latest Version 117.0.5938.92 (Official Build) (64-bit)

Any other tested browsers/devices(OK/FAIL): Also failed in Brave Browser, Version 1.60.114 Chromium: 119.0.6045.124 (Official Build) (64-bit)]

URL (minimal example if possible): Test ready code: https://plnkr.co/plunk/XFsMYL46cTBBur7s

Steps to reproduce the problem:

  1. Go to the example of the ShellBar https://openui5.hana.ondemand.com/1.120.1/#/entity/sap.f.ShellBar/sample/sap.f.sample.ShellBarWithMenuButton
  2. Go to code editor of the ShellBarWithMenuButton.view.xml
  3. Overwrite the xml view witht the following lines: (To add a Page, customHeader, content and Text Control) `<mvc:View controllerName="sap.f.sample.ShellBarWithMenuButton.ShellBarWithMenuButton" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.f" xmlns:m="sap.m" xmlns:layout= "sap.ui.layout" height="100%"> `
  4. Press Run.
  5. See on the preview on the left side, that the content got overlapped by the customHeader with the ShellBar in it. Also, press the "Back to samples" Button in order to close the code editor mode to see the overlapping and 52px height of the header.
  6. Check the CSS. contentHeader / ShellBar is 52 px high (header tag). The content (section tag in DOM) has top-margin of 44px -> The header overlaps the content/section by 8 pixels.

What is the expected result? The content should be right under the customHeader. -> The section element should have correct top-margin to be right under the header dom element.

What happens instead? The customHeader overlaps the content by 8 px. header tag has height of 52 px. section tag has top of only 44 px.

Any other information? (attach screenshot if possible) I saw similiar bug 3712 here. Please cross-check if that is relevant here (internal incident 2370012820). Please also see above link to Plunker.

image

IlianaB commented 1 year ago

Hello @ddNils ,

Thank you for sharing this finding. This issue is related with the already reported one (#3712), so you can still track the progress of Internal Incident 2370012820. The status of the issue will be updated here in GitHub.

Regards, Iliana

flovogt commented 10 months ago

The team decided to work on this issue via backlog item BGSOFUIPIRIN-6322. Updates will be posted here.