Skip to content

[ui5-dialog]: Status icon misalignment in header when using ui5-bar component #12228

@bennylalala

Description

@bennylalala

Bug Description

This issue is a follow-up to #6638. The CSS workaround provided in that issue to override header padding fails when the dialog has a state icon. The state icon appears misaligned within the ui5-bar header layout.

Image

Affected Component

No response

Expected Behaviour

State icons should maintain proper alignment within the dialog header regardless of custom CSS overrides applied to ui5-bar padding.

Isolated Example

https://sap.github.io/ui5-webcomponents/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbiAgICA8bGluayByZWw9XCJzdHlsZXNoZWV0XCIgaHJlZj1cIi4vbWFpbi5jc3NcIj5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpOyBoZWlnaHQ6IDQ1MHB4O1wiPlxuICAgIDwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cblxuICAgIDx1aTUtYnV0dG9uIGlkPVwiZGlhbG9nT3BlbmVyXCI-T3BlbiBEaWFsb2c8L3VpNS1idXR0b24-XG5cbiAgICA8dWk1LWRpYWxvZyBpZD1cImRpYWxvZ1wiIHN0YXRlPVwiQ3JpdGljYWxcIj5cbiAgICAgICAgPHVpNS1iYXIgc2xvdD1cImhlYWRlclwiIGRlc2lnbj1cIkhlYWRlclwiPlxuICAgICAgICAgICAgPHVpNS10aXRsZSBsZXZlbD1cIkg1XCIgc2xvdD1cInN0YXJ0Q29udGVudFwiPkJhciB1c2VkIGluIEhlYWRlciBhbmQgRm9vdGVyPC91aTUtdGl0bGU-XG4gICAgICAgICAgICA8dWk1LWJ1dHRvbiBjbGFzcz1cImRpYWxvZ0Nsb3NlclwiIGRlc2lnbj1cIlRyYW5zcGFyZW50XCIgaWQ9XCJjbG9zZURpYWxvZ0J1dHRvblwiIHNsb3Q9XCJlbmRDb250ZW50XCJcbiAgICAgICAgICAgICAgICBpY29uPVwiZGVjbGluZVwiPjwvdWk1LWJ1dHRvbj5cbiAgICAgICAgPC91aTUtYmFyPlxuICAgICAgICA8cD5BZGRpbmcgc3R5bGVzIGZvciB0aGUgcGFydHMgdG8gcmVtb3ZlIHRoZSBkZWZhdWx0IERpYWxvZydzIHBhZGRpbmdzIHdoZW4gdWk1LWJhciBpcyB1c2VkIGluc2lkZSBIZWFkZXIgYW5kXG4gICAgICAgICAgICBGb290ZXI8L3A-XG4gICAgICAgIDx1aTUtYmFyIHNsb3Q9XCJmb290ZXJcIiBkZXNpZ249XCJGb290ZXJcIj5cbiAgICAgICAgICAgIDx1aTUtYnV0dG9uIGNsYXNzPVwiZGlhbG9nQ2xvc2VyXCIgZGVzaWduPVwiRW1waGFzaXplZFwiIHNsb3Q9XCJlbmRDb250ZW50XCJcbiAgICAgICAgICAgICAgICBzdHlsZT1cIm1pbi13aWR0aDogNHJlbTtcIj5PSzwvdWk1LWJ1dHRvbj5cbiAgICAgICAgPC91aTUtYmFyPlxuICAgIDwvdWk1LWRpYWxvZz5cbiAgICA8IS0tIHBsYXlncm91bmQtZm9sZCAtLT5cbiAgICA8c2NyaXB0IHR5cGU9XCJtb2R1bGVcIiBzcmM9XCJtYWluLmpzXCI-PC9zY3JpcHQ-XG48L2JvZHk-XG5cbjwvaHRtbD5cbjwhLS0gcGxheWdyb3VuZC1mb2xkLWVuZCAtLT5cbiJ9LCJtYWluLmpzIjp7Im5hbWUiOiJtYWluLmpzIiwiY29udGVudCI6Ii8qIHBsYXlncm91bmQtaGlkZSAqL1xuaW1wb3J0IFwiLi9wbGF5Z3JvdW5kLXN1cHBvcnQuanNcIjtcbi8qIHBsYXlncm91bmQtaGlkZS1lbmQgKi9cbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0RpYWxvZy5qc1wiO1xuaW1wb3J0IFwiQHVpNS93ZWJjb21wb25lbnRzL2Rpc3QvVGl0bGUuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0J1dHRvbi5qc1wiO1xuXG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9CYXIuanNcIjtcbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy1pY29ucy9kaXN0L2RlY2xpbmUuanNcIjtcblxudmFyIGRpYWxvZ09wZW5lciA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiZGlhbG9nT3BlbmVyXCIpO1xudmFyIGRpYWxvZyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKFwiZGlhbG9nXCIpO1xudmFyIGRpYWxvZ0Nsb3NlcnMgPSBbLi4uZGlhbG9nLnF1ZXJ5U2VsZWN0b3JBbGwoXCIuZGlhbG9nQ2xvc2VyXCIpXTtcblxuZGlhbG9nT3BlbmVyLmFjY2Vzc2liaWxpdHlBdHRyaWJ1dGVzID0ge1xuICAgIGhhc1BvcHVwOiBcImRpYWxvZ1wiLFxuICAgIGNvbnRyb2xzOiBkaWFsb2cuaWQsXG59O1xuZGlhbG9nT3BlbmVyLmFkZEV2ZW50TGlzdGVuZXIoXCJjbGlja1wiLCAoKSA9PiB7XG4gICAgZGlhbG9nLm9wZW4gPSB0cnVlO1xufSk7XG5kaWFsb2dDbG9zZXJzLmZvckVhY2goYnRuID0-IHtcbiAgICBidG4uYWRkRXZlbnRMaXN0ZW5lcihcImNsaWNrXCIsICgpID0-IHtcbiAgICAgICAgZGlhbG9nLm9wZW4gPSBmYWxzZTtcbiAgICB9KTtcbn0pIn0sIm1haW4uY3NzIjp7Im5hbWUiOiJtYWluLmNzcyIsImNvbnRlbnQiOiIjZGlhbG9nOjpwYXJ0KGhlYWRlciksXG4jZGlhbG9nOjpwYXJ0KGZvb3Rlcikge1xuICAgIHBhZGRpbmctaW5saW5lOiAwO1xufSJ9fQ

Steps to Reproduce

Log Output, Stack Trace or Screenshots

No response

Priority

None

UI5 Web Components Version

2.13.3

Browser

Chrome

Operating System

No response

Additional Context

No response

Organization

No response

Declaration

  • I’m not disclosing any internal or sensitive information.

Metadata

Metadata

Labels

TOPIC RDbugThis issue is a bug in the code

Type

Projects

Status

New Issues

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions