Utilizing the timepicker.js library to select a time, I am encountering an issue. When clicking on the input field, the timepicker should appear next to it. This function works as expected when the input is within the main view of the document. However, if the input is located further down (requiring scrolling to see), upon clicking, the timepicker appears higher up on the page in the main view.
Desired behavior shown here:
Actual behavior for inputs lower down after scrolling:
In the latter case, I would like the timepicker to be positioned next to the input field, similar to the first case.
Sample index.html code:
<!DOCTYPE html>
<html lang="en>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<input type="text" id="time1" placeholder="Time" />
<div style="height: 70rem;"></div>
<input type="text" id="time2" placeholder="Time" value="18:00" />
<div style="height: 70rem;"></div>
</body>
<link
href="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.css"
rel="stylesheet"
/>
<script src="//cdn.jsdelivr.net/timepicker.js/latest/timepicker.min.js"></script>
<script src="./index.js"></script>
</html>
Content of index.js:
var time1 = document.getElementById("time1");
var time2 = document.getElementById("time2");
var timepicker = new TimePicker(["time1", "time2"], {
lang: "en"
});
timepicker.on("change", function(evt) {
var value = (evt.hour || "00") + ":" + (evt.minute || "00");
evt.element.value = value;
});