IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-29 20:24:05 -06:00
Code Issues Packages Projects Releases Wiki Activity

DEV: Set containing block for Popper dropdowns (#20745)

Browse Source 
Popper dropdowns used `position: fixed` or `position: absolute`. But in
tables, we want the content to use auto overflow horizontally, and that
causes the dropdowns to be hidden vertically in some scenarios.

Setting a containing block on the parent container fixes both placement
and overflow issues.
This commit is contained in:
Penar Musaraj 2023-03-20 15:26:20 -04:00 committed by GitHub
parent ca4b73d20c
commit 5b0d300b8a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 4 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/stylesheets/common/base/directory.scss
View File

@ -101,6 +101,10 @@
.directory-table-container {
container-type: inline-size;
container-name: directory-table;
transform: translateX(0px);
// transform here creates a containing blocks which
// is used by fixed-positioned dropdowns
// if omitted, `overflow-x: auto;` below will clip them
}
.directory-table {

9
app/assets/stylesheets/common/components/group-member-dropdown.scss
View File

@ -1,12 +1,3 @@
.group-member-dropdown {
text-align: left;
.select-kit-body {
// this is a little hacky
// but solves an issue with a wrapping container query on .directory-table-container
// which breaks our popper positioning in this one specific instance
inset: unset !important;
transform: unset !important;
right: 0 !important;
}
}