e-suite/webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed the autocomplete UI position issue

Browse Source
This commit is contained in:
Colin Dawson 2026-01-31 22:34:10 +00:00
parent f8a5681b88
commit d868b332f4
1 changed files with 62 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
src/Sass/autoComplete.scss
View File

@ -1,70 +1,74 @@
.autocomplete { .autocomplete {
.autocomplete-option { position: relative;
width: 100%; .autocomplete-option {
height: 30px; width: 100%;
height: 30px;
}
.autocomplete-text-input {
border: none;
width: 100%;
&:focus {
outline: none;
} }
.autocomplete-text-input { &:focus-visible {
border: none; border: none;
width: 100%;
&:focus {
outline: none;
}
&:focus-visible {
border: none;
}
&:focus-within {
border: none;
}
&:active {
border: none;
}
} }
.autocomplete-options { &:focus-within {
border: 1px; border: none;
border-style: solid;
border-color: var(--bs-body-tx);
border-radius: 5px;
background-color: var(--bs-body-bg);
position: absolute;
max-height: 400px;
z-index: 80;
padding: 5px;
max-height: 350px !important;
overflow: auto;
li {
margin: 0;
padding: 0px 5px 0px 0px;
list-style: none;
margin-left: 5px;
}
} }
button { &:active {
background: none; border: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
} }
}
.autocomplete-option:focus { .autocomplete-options {
background-color: #f3f3f4; border: 1px;
} border-style: solid;
border-color: var(--bs-body-tx);
border-radius: 5px;
background-color: var(--bs-body-bg);
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: 400px;
z-index: 80;
padding: 5px;
max-height: 350px !important;
overflow: auto;
.autocomplete-option:hover { li {
background-color: #f3f3f3; margin: 0;
padding: 0px 5px 0px 0px;
list-style: none;
margin-left: 5px;
} }
}
.text-left { button {
text-align: left; background: none;
} color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.autocomplete-option:focus {
background-color: #f3f3f4;
}
.autocomplete-option:hover {
background-color: #f3f3f3;
}
.text-left {
text-align: left;
}
} }