fix(webui): Selector options appear above everything
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
This commit is contained in:
parent
59895342f2
commit
448fa1a440
2 changed files with 28 additions and 8 deletions
|
@ -138,7 +138,7 @@
|
|||
.view {
|
||||
display: flex;
|
||||
|
||||
z-index: 1;
|
||||
z-index: 10;
|
||||
flex-direction: column;
|
||||
min-width: var(--width);
|
||||
max-width: var(--width);
|
||||
|
|
|
@ -309,6 +309,19 @@
|
|||
|
||||
$: dbg('%o Options: %O', selectorEl, options);
|
||||
|
||||
let optionsTop = '0';
|
||||
let optionsLeft = '0';
|
||||
let optionsWidth = '0';
|
||||
let optionsMaxHeight = 'auto';
|
||||
|
||||
$: if (visible) {
|
||||
const rect = selectorEl.getBoundingClientRect();
|
||||
optionsTop = rect.bottom + window.scrollY + 4 + 'px';
|
||||
optionsLeft = rect.left + window.scrollX + 'px';
|
||||
optionsWidth = rect.width + 'px';
|
||||
optionsMaxHeight = window.innerHeight - rect.bottom - 4 * 3 + 'px';
|
||||
}
|
||||
|
||||
$: {
|
||||
if (inputFocused) {
|
||||
updateOptions(inputValue, true);
|
||||
|
@ -458,7 +471,14 @@
|
|||
$: dbg('%o focus = %s, hover = %s, visible = %s', selectorEl, inputFocused, hover, visible);
|
||||
</script>
|
||||
|
||||
<div class="selector" bind:this={selectorEl}>
|
||||
<div
|
||||
class="selector"
|
||||
bind:this={selectorEl}
|
||||
style="--options-top: {optionsTop};
|
||||
--options-left: {optionsLeft};
|
||||
--options-width: {optionsWidth};
|
||||
--options-max-height: {optionsMaxHeight}"
|
||||
>
|
||||
{#if current?.t === 'Address' && inputValue.length > 0}
|
||||
<div class="input">
|
||||
<div class="label">
|
||||
|
@ -552,10 +572,6 @@
|
|||
<style lang="scss">
|
||||
@use '../../styles/colors';
|
||||
|
||||
.selector {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.input {
|
||||
display: flex;
|
||||
min-width: 0;
|
||||
|
@ -569,10 +585,14 @@
|
|||
visibility: hidden;
|
||||
|
||||
z-index: 99;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
top: var(--options-top);
|
||||
left: var(--options-left);
|
||||
width: max(var(--options-width), 12em);
|
||||
max-height: var(--options-max-height);
|
||||
margin: 2px 0 0;
|
||||
padding: 0;
|
||||
overflow-y: scroll;
|
||||
border: 1px solid var(--foreground-lighter);
|
||||
border-radius: 4px;
|
||||
background: var(--background);
|
||||
|
|
Loading…
Reference in a new issue