JSFiddle - React, Tailwind, and code Playground

by baton

HTML

<html>
<body>
    <b>Calendar vertical position error</b>
    <p>Click the input field below to trigger calendar. It will be wrongly positioned though.</p>
    <p>Calendar: <input id="calT" /> &lt;&lt;click to show calendar</p>
    <p>It will be correctly positioned only if browser window width exactly matches the body width (which is set to 380px)</p>
    <p>To see the error - make the page wide so white margins can be seen on both sides of the grey horizontal bar (the bigger white bars - the bigger the offset)</p>
</body>
</html>

CSS

html { background-color: white; height: 100%; }
body {
    height: 100%;
    margin: 0 auto; /* this + bode fixed width is causing the datepicker vertical position to calculate wrongly */
    position: relative;
    width: 380px;
    background-color: #bbb;
}
#calT { width: 60px; height: 20px; }

JavaScript

$('#calT').datepicker();