In my current project, I am utilizing Javascript, specifically the VueJS framework, to create a page named mainTextEditor. This page consists of a text field and a 'popup' that is implemented using a div with a v-if directive to show the div when a certain condition is met.
It is worth mentioning that this is a component nested within another component like so (Inserted using main-text-editor):
<template>
<v-card flat>
<div class="background-colour-grey form-title temp-build-ellipse temp-build-overflow d-flex">
<v-card-title class="form-title pl-0 pr-1">{{ itemHere.name }}</v-card-title>
</div>
<v-card-actions>
<div
class="mt-0 pa-0"
>
// HERE IS WHERE THE COMPONENT IS INSERTED
<main-text-editor
class="mt-0 pt-0 background-colour-grey"
/>
</div>
</v-card-actions>
</v-card>
</template>
The code snippet provided above generates the mainTextEditor text field and popup described earlier:
<template>
<div class="my-auto width-100" style="position: relative !important;">
<v-card flat>
<v-text-field :editor="editor"/>
</v-card>
<div class="formula-options" v-if="editorContentIsUsingFormulas">
<v-list class="pt-0 pb-0" dense v-for="item in filteredItems" :key="item.id" >
<v-list-item class="d-flex">
<v-list-item-title>
<strong>{{ item.name }}</strong>{{ item.structure }}
</v-list-item-title>
</v-list-item>
</v-list>
</div>
</div>
</template>
When the text field is clicked, editorContentIsUsingFormulas becomes true.
The CSS styles applied are as follows:
.formula-options {
z-index: 2 !important;
background-color: white;
width: 30vw;
max-height: 40vh;
overflow-y: scroll;
position: absolute !important;
border-radius: 20px;
border: 2px solid grey;
margin-left: 3px;
}
.temp-build-ellipse {
max-height: 39.98px;
overflow: hidden;
text-overflow: ellipsis;
}
.temp-build-overflow {
height: 39.98px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap
}
The issue arises when the text field is located at the bottom of the page, causing whitespace to extend beyond the entire page height of 100vh.
Below are visuals illustrating the problem:
https://i.sstatic.net/6VWtd.png
https://i.sstatic.net/XmXzU.png
https://i.sstatic.net/Jz8A3.png
Despite setting the position to absolute, the div seems to still be positioned at the bottom of the text field. Any insights on what could be going wrong would be greatly appreciated.