diff --git a/src/Sass/autoComplete.scss b/src/Sass/autoComplete.scss index 1c6261a..1c4e610 100644 --- a/src/Sass/autoComplete.scss +++ b/src/Sass/autoComplete.scss @@ -1,70 +1,74 @@ .autocomplete { - .autocomplete-option { - width: 100%; - height: 30px; - } + position: relative; + .autocomplete-option { + width: 100%; + height: 30px; + } - .autocomplete-text-input { - border: none; - width: 100%; + .autocomplete-text-input { + border: none; + width: 100%; - &:focus { - outline: none; - } - - &:focus-visible { - border: none; - } - - &:focus-within { - border: none; - } - - &:active { - border: none; - } + &:focus { + outline: none; } - .autocomplete-options { - border: 1px; - 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; - } + &:focus-visible { + border: none; } - button { - background: none; - color: inherit; - border: none; - padding: 0; - font: inherit; - cursor: pointer; - outline: inherit; + &:focus-within { + border: none; } - .autocomplete-option:focus { - background-color: #f3f3f4; - } - - .autocomplete-option:hover { - background-color: #f3f3f3; + &:active { + border: none; } + } - .text-left { - text-align: left; + .autocomplete-options { + 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; + + li { + margin: 0; + padding: 0px 5px 0px 0px; + list-style: none; + margin-left: 5px; } -} \ No newline at end of file + } + + button { + 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; + } +}