Hello, I have a query that I need help with.
I currently have a basic table with buttons in columns that act as filters. When you click on one of these buttons, it opens up a form.
https://i.sstatic.net/nuEpq.png
What I am trying to achieve is to make the form appear at the exact coordinates of the button when it is clicked. I have attempted to retrieve the coordinates of the button and modify the form accordingly, but I have encountered some difficulties.
As a testing measure, I tried the following:
document.getElementById('myForm').style.top = "100px;";
However, this method did not work as expected.
Here is the structure of the form:
<div class="form-popup" id="myForm">
<div class="form-container">
<h1 id="filtername">Filter</h1>
<div class="row">
<div class="col-6">
<label>Set minimum</label><input id="mininfilter" class="form-control" type="number" value="0">
</div>
<div class="col-6">
<label>Set maximum</label><input id="maxfilter" class="form-control" type="number" value="0">
</div>
</div>
<br>
<button type="button" id="filtersave" class="btn">Apply</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
<button type="button" id="back_to_normal" class="btn warning"><i class="material-icons">
autorenew
</i></button>
</div>
</div>
And this is the corresponding CSS:
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 0;
border: 3px solid #f1f1f1;
z-index: 9;
I appreciate any assistance you can provide. Thank you!