Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix overflow issue with drop

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-06-18 15:43:44 +02:00
parent 94fee6e361
commit 191f2ba559
4 changed files with 77 additions and 55 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
vuejs/client/input.css
View file

@ -278,11 +278,15 @@ body {
}
.open.select-dropdown-container {
@apply absolute z-[20] opacity-100;
@apply absolute z-[2000];
}
.open.select-dropdown-container {
animation: dropOpen 0.1s linear;
}
.close.select-dropdown-container {
@apply -z-10 hidden;
@apply hidden;
}
.select-dropdown-btn {
@ -2784,3 +2788,15 @@ body {
.z-80 {
@apply z-[80];
}
@keyframes dropOpen {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

2
vuejs/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

55
vuejs/client/src/components/Forms/Field/Combobox.vue
View file

@ -193,37 +193,40 @@ function toggleSelect() {
inp.value = "";
inputEl.value.focus();
// Get field container rect
const fieldContainer = selectBtn.value.closest("[data-field-container]");
const parent = props.overflowAttrEl
? fieldContainer.closest(`[${props.overflowAttrEl}]`)
: fieldContainer.parentElement;
// Update position only if parent has overflow
const isOverflow = parent.scrollHeight > parent.clientHeight ? true : false;
if (!isOverflow) return;
setTimeout(() => {
// Get field container rect
const fieldContainer = selectBtn.value.closest("[data-field-container]");
const parent = props.overflowAttrEl
? fieldContainer.closest(`[${props.overflowAttrEl}]`)
: fieldContainer.parentElement;
// Update position only if parent has overflow
const isOverflow =
parent.scrollHeight > parent.clientHeight ? true : false;
if (!isOverflow) return;
// Get all rect
const selectBtnRect = selectBtn.value.getBoundingClientRect();
const fieldContainerRect = fieldContainer.getBoundingClientRect();
const selectDropRect = selectDropdown.value.getBoundingClientRect();
// Get all rect
const selectBtnRect = selectBtn.value.getBoundingClientRect();
const fieldContainerRect = fieldContainer.getBoundingClientRect();
const selectDropRect = selectDropdown.value.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect();
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
if (!canBeDown) {
selectDropdown.value.style.top = `-${
selectDropRect.height + selectBtnRect.height - 16
}px`;
}
if (!canBeDown) {
selectDropdown.value.style.top = `-${
selectDropRect.height + selectBtnRect.height - 16
}px`;
}
if (canBeDown) {
selectDropdown.value.style.top = `${selectBtnRect.height}px`;
}
if (canBeDown) {
selectDropdown.value.style.top = `${selectBtnRect.height}px`;
}
}, 10);
}
}

55
vuejs/client/src/components/Forms/Field/Select.vue
View file

@ -168,38 +168,41 @@ function toggleSelect() {
select.isOpen = select.isOpen ? false : true;
// Check if parent has overflow
if (select.isOpen) {
// Get field container rect
const fieldContainer = selectBtn.value.closest("[data-field-container]");
const parent = props.overflowAttrEl
? fieldContainer.closest(`[${props.overflowAttrEl}]`)
: fieldContainer.parentElement;
setTimeout(() => {
// Get field container rect
const fieldContainer = selectBtn.value.closest("[data-field-container]");
const parent = props.overflowAttrEl
? fieldContainer.closest(`[${props.overflowAttrEl}]`)
: fieldContainer.parentElement;
// Update position only if parent has overflow
const isOverflow = parent.scrollHeight > parent.clientHeight ? true : false;
if (!isOverflow) return;
// Update position only if parent has overflow
const isOverflow =
parent.scrollHeight > parent.clientHeight ? true : false;
if (!isOverflow) return;
// Get all rect
const selectBtnRect = selectBtn.value.getBoundingClientRect();
const fieldContainerRect = fieldContainer.getBoundingClientRect();
const selectDropRect = selectDropdown.value.getBoundingClientRect();
// Get all rect
const selectBtnRect = selectBtn.value.getBoundingClientRect();
const fieldContainerRect = fieldContainer.getBoundingClientRect();
const selectDropRect = selectDropdown.value.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect();
const parentRect = parent.getBoundingClientRect();
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
if (!canBeDown) {
selectDropdown.value.style.top = `-${
selectDropRect.height + selectBtnRect.height - 16
}px`;
}
if (!canBeDown) {
selectDropdown.value.style.top = `-${
selectDropRect.height + selectBtnRect.height - 16
}px`;
}
if (canBeDown) {
selectDropdown.value.style.top = `${selectBtnRect.height}px`;
}
if (canBeDown) {
selectDropdown.value.style.top = `${selectBtnRect.height}px`;
}
}, 10);
}
}