Closed felixbade closed 1 year ago
Should be possible with JavaScript. ChatGPT’s help:
To make an HTML element that is positioned at the bottom of the screen, you can use CSS with the position
property set to fixed
and bottom
set to 0
. This will ensure that the element is always positioned at the bottom of the screen.
To align the element with the top of the keyboard when it is opened, you can use JavaScript to adjust the element's position when the keyboard is opened.
Here is an example CSS for an HTML element that is positioned at the bottom of the screen:
#compose-box {
position: fixed;
bottom: 0;
width: 100%;
background-color: #f9f9f9;
padding: 20px;
}
In the above example, #compose-box
is the ID of the HTML element that you want to position at the bottom of the screen. You can adjust the styling properties to fit your design.
To align the element with the top of the keyboard when it is opened, you can use the window.innerHeight
property to get the height of the viewport, and then subtract the height of the keyboard to get the new position of the element. Here's an example JavaScript code that you can use to adjust the position of the element:
window.addEventListener('resize', function() {
var composeBox = document.getElementById('compose-box');
var keyboardHeight = window.innerHeight - document.documentElement.clientHeight;
composeBox.style.bottom = keyboardHeight + 'px';
});
In the above example, the resize
event is used to detect when the keyboard is opened or closed. The document.documentElement.clientHeight
property is used to get the height of the viewport, and the window.innerHeight
property is used to get the height of the viewport plus the height of the keyboard. Subtracting these values will give you the height of the keyboard. Finally, the bottom
property of the #compose-box
element is set to the height of the keyboard to align it with the top of the keyboard.
Note that this approach may not work on all devices, as the height of the keyboard can vary depending on the device and the input method being used.
Fixed in 18ea2c7
Not sure how to do this so that the vertical position perfectly aligns with the keyboard, but it should be possible, since chat.openai.com does it.