[ui5-avatar-group]: focus cut #10551
Comments
NakataCode
added a commit
that referenced
this issue
May 30, 2025
Problem: Focus outline is cut off when the avatar-group is placed inside a container with overflow:hidden. Solution: Added padding to the avatar group container using a new parameter --_ui5_avatar_group_focus_space. This ensures sufficient space for the focus outline to be fully visible. Fixes: #10551
github-project-automation
bot
moved this from In Progress
to Completed
in Maintenance - Topic P
|
This issue has been closed. To reopen, just leave a comment! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Bug Description
Avatar focus is cut if avatar group is displayed inside container with overflow hidden
Solution for similar problem: #10205
Affected Component
ui5-avatar-group
Expected Behaviour
Focus to be fully visible when the component is placed inside component with overflow hidden
Isolated Example
https://sap.github.io/ui5-webcomponents/nightly/play/#eyJpbmRleC5odG1sIjp7Im5hbWUiOiJpbmRleC5odG1sIiwiY29udGVudCI6IjwhLS0gcGxheWdyb3VuZC1mb2xkIC0tPlxuPCFET0NUWVBFIGh0bWw-XG48aHRtbCBsYW5nPVwiZW5cIj5cblxuXG5cblxuXG5cblxuXG5cbjxoZWFkPlxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgXG4gICAgPHN0eWxlPlxuICAgICAgKjpub3QoOmRlZmluZWQpIHtcbiAgICAgICAgZGlzcGxheTogbm9uZTtcbiAgICAgIH1cblxuICAgIGh0bWwge1xuICAgICAgZm9yY2VkLWNvbG9yLWFkanVzdDogbm9uZTtcbiAgICB9XG4gICAgPC9zdHlsZT5cblxuICAgIFxuICAgIDxzdHlsZT5cbiAgICAgICo6bm90KDpkZWZpbmVkKSB7XG4gICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICB9XG5cbiAgICBodG1sIHtcbiAgICAgIGZvcmNlZC1jb2xvci1hZGp1c3Q6IG5vbmU7XG4gICAgfVxuICAgIDwvc3R5bGU-XG5cbiAgICBcbiAgICA8c3R5bGU-XG4gICAgICAqOm5vdCg6ZGVmaW5lZCkge1xuICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgfVxuXG4gICAgaHRtbCB7XG4gICAgICBmb3JjZWQtY29sb3ItYWRqdXN0OiBub25lO1xuICAgIH1cbiAgICA8L3N0eWxlPlxuXG4gICAgPG1ldGEgY2hhcnNldD1cIlVURi04XCI-XG4gICAgPG1ldGEgbmFtZT1cInZpZXdwb3J0XCIgY29udGVudD1cIndpZHRoPWRldmljZS13aWR0aCwgaW5pdGlhbC1zY2FsZT0xLjBcIj5cbiAgICA8dGl0bGU-U2FtcGxlPC90aXRsZT5cbjwvaGVhZD5cblxuPGJvZHkgc3R5bGU9XCJiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1zYXBCYWNrZ3JvdW5kQ29sb3IpXCI-XG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQtZW5kIC0tPlxuICAgIFxuXHQ8ZGl2IHN0eWxlPVwib3ZlcmZsb3c6IGhpZGRlbjsgYm9yZGVyOiAxcHggc29saWQgcmVkO1wiPlxuXHRcdDx1aTUtYXZhdGFyLWdyb3VwIHR5cGU9XCJJbmRpdmlkdWFsXCI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0XHQ8dWk1LWF2YXRhciBpbnRlcmFjdGl2ZSBzaXplPVwiTVwiIGluaXRpYWxzPVwiSkRcIj48L3VpNS1hdmF0YXI-XG5cdFx0PC91aTUtYXZhdGFyLWdyb3VwPlxuXHQ8L2Rpdj5cbiAgXHQ8ZGl2IHN0eWxlPVwib3ZlcmZsb3c6IGhpZGRlbjsgYm9yZGVyOiAxcHggc29saWQgcmVkO1wiPlxuXHRcdDx1aTUtYXZhdGFyLWdyb3VwIHR5cGU9XCJHcm91cFwiPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdFx0PHVpNS1hdmF0YXIgaW50ZXJhY3RpdmUgc2l6ZT1cIk1cIiBpbml0aWFscz1cIkpEXCI-PC91aTUtYXZhdGFyPlxuXHRcdDwvdWk1LWF2YXRhci1ncm91cD5cblx0PC9kaXY-XG4gICAgPCEtLSBwbGF5Z3JvdW5kLWZvbGQgLS0-XG4gICAgPHNjcmlwdCB0eXBlPVwibW9kdWxlXCIgc3JjPVwibWFpbi5qc1wiPjwvc2NyaXB0PlxuPC9ib2R5PlxuXG48L2h0bWw-XG48IS0tIHBsYXlncm91bmQtZm9sZC1lbmQgLS0-XG4ifSwibWFpbi50c3giOnsibmFtZSI6Im1haW4udHN4IiwiY29udGVudCI6Ii8qIHBsYXlncm91bmQtaGlkZSAqL1xuaW1wb3J0IFwiLi9wbGF5Z3JvdW5kLXN1cHBvcnQuanNcIjtcbi8qIHBsYXlncm91bmQtaGlkZS1lbmQgKi9cbmltcG9ydCBVSTVFbGVtZW50IGZyb20gXCJAdWk1L3dlYmNvbXBvbmVudHMtYmFzZS9kaXN0L1VJNUVsZW1lbnQuanNcIjtcbmltcG9ydCBqc3hSZW5kZXJlciBmcm9tIFwiQHVpNS93ZWJjb21wb25lbnRzLWJhc2UvZGlzdC9yZW5kZXJlci9Kc3hSZW5kZXJlci5qc1wiO1xuaW1wb3J0IHsgY3VzdG9tRWxlbWVudCwgcHJvcGVydHkgfSBmcm9tIFwiQHVpNS93ZWJjb21wb25lbnRzLWJhc2UvZGlzdC9kZWNvcmF0b3JzLmpzXCI7XG5cbkBjdXN0b21FbGVtZW50KHtcbiAgdGFnOiBcIm15LWVsZW1lbnRcIixcbiAgcmVuZGVyZXI6IGpzeFJlbmRlcmVyLFxufSlcbmV4cG9ydCBjbGFzcyBNeUVsZW1lbnQgZXh0ZW5kcyBVSTVFbGVtZW50IHtcbiAgQHByb3BlcnR5KClcbiAgbmFtZT86IHN0cmluZztcblxuICByZW5kZXIoKSB7XG4gICAgcmV0dXJuIChcbiAgICAgIDxkaXY-XG4gICAgICAgICAgSGVsbG8sIHt0aGlzLm5hbWUgfHwgXCJXb3JsZFwifSFcbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxuXG4gIHN0YXRpYyBzdHlsZXMgPSBgZGl2IHtcbiAgICAgIHBhZGRpbmc6IDFyZW07XG4gICAgICBjb2xvcjogIzMzNGVmZjtcbiAgfWA7XG59XG5cbk15RWxlbWVudC5kZWZpbmUoKTtcbiJ9LCJtYWluLmpzIjp7Im5hbWUiOiJtYWluLmpzIiwiY29udGVudCI6Ii8qIHBsYXlncm91bmQtaGlkZSAqL1xuaW1wb3J0IFwiLi9wbGF5Z3JvdW5kLXN1cHBvcnQuanNcIjtcbi8qIHBsYXlncm91bmQtaGlkZS1lbmQgKi9cbmltcG9ydCBcIkB1aTUvd2ViY29tcG9uZW50cy9kaXN0L0F2YXRhckdyb3VwLmpzXCI7XG5pbXBvcnQgXCJAdWk1L3dlYmNvbXBvbmVudHMvZGlzdC9BdmF0YXIuanNcIjtcbiJ9fQ
Steps to Reproduce
...
Log Output, Stack Trace or Screenshots
No response
Priority
None
UI5 Web Components Version
nightly
Browser
Chrome
Operating System
No response
Additional Context
No response
Organization
No response
Declaration
The text was updated successfully, but these errors were encountered: