style: fixed selection items position
Signed-off-by: mellobacon <mellodev@outlook.com>
mellobacon committed
Feb 2, 2024 at 10:45 UTC
24a0e3376941d3596daff2236f5eaca601e65ca1
1 file changed
+8
-7
src/lib/utility/Select.svelte
+8
-7
@@ -1,6 +1,6 @@
1
<script lang="ts">
2
import { ChevronDown } from "carbon-icons-svelte";
3
- import { afterUpdate, createEventDispatcher } from "svelte";
3
+ import { afterUpdate, createEventDispatcher, onMount } from "svelte";
4
const dispatch = createEventDispatcher();
5
6
export let label: string;
@@ -22,8 +22,9 @@
22
23
afterUpdate(() => {
24
if (open && list) {
25
- const { _ , width } = button.getBoundingClientRect();
26
- list.style.width = `${width}px`;
25
+ const { width, height, top } = list.getBoundingClientRect();
26
+ //list.style.width = `${width}px`;
27
+ //button.style.width = `${width}px`;
28
}
29
})
30
@@ -79,11 +80,11 @@
80
}
81
}
82
.select-list {
82
- min-width: 7rem;
83
+ min-width: 20rem;
84
button {
85
display: flex;
86
align-items: center;
86
- justify-content: center;
87
+ justify-content: space-between;
88
min-height: 2rem;
89
width: 100%;
90
padding: 0 20px;
@@ -102,10 +103,10 @@
103
}
104
}
105
.item-list {
105
- position: absolute;
106
+ position: relative;
107
+ top: 1px;
108
max-height: 15rem;
109
overflow-y: overlay;
108
- min-width: 20rem;
110
z-index: 1;
111
&::-webkit-scrollbar {
112
width: 12px;