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 {
|
.view {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
z-index: 1;
|
z-index: 10;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-width: var(--width);
|
min-width: var(--width);
|
||||||
max-width: var(--width);
|
max-width: var(--width);
|
||||||
|
|
|
@ -309,6 +309,19 @@
|
||||||
|
|
||||||
$: dbg('%o Options: %O', selectorEl, options);
|
$: 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) {
|
if (inputFocused) {
|
||||||
updateOptions(inputValue, true);
|
updateOptions(inputValue, true);
|
||||||
|
@ -458,7 +471,14 @@
|
||||||
$: dbg('%o focus = %s, hover = %s, visible = %s', selectorEl, inputFocused, hover, visible);
|
$: dbg('%o focus = %s, hover = %s, visible = %s', selectorEl, inputFocused, hover, visible);
|
||||||
</script>
|
</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}
|
{#if current?.t === 'Address' && inputValue.length > 0}
|
||||||
<div class="input">
|
<div class="input">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
|
@ -552,10 +572,6 @@
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
@use '../../styles/colors';
|
@use '../../styles/colors';
|
||||||
|
|
||||||
.selector {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
.input {
|
||||||
display: flex;
|
display: flex;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
@ -569,10 +585,14 @@
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
position: absolute;
|
position: fixed;
|
||||||
width: 100%;
|
top: var(--options-top);
|
||||||
|
left: var(--options-left);
|
||||||
|
width: max(var(--options-width), 12em);
|
||||||
|
max-height: var(--options-max-height);
|
||||||
margin: 2px 0 0;
|
margin: 2px 0 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
border: 1px solid var(--foreground-lighter);
|
border: 1px solid var(--foreground-lighter);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: var(--background);
|
background: var(--background);
|
||||||
|
|
Loading…
Reference in a new issue