JSFiddle - React, Tailwind, and code Playground

by TJ VanToll

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<p><a href="http://bugs.jqueryui.com/ticket/8223">jQuery UI #8223</a> - Datepicker does not scroll with input.  To recreate show the date picker and then scroll down in the outer container.</p>

<div id="parent">
    <div id="child">
        <input>
    </div>
</div>

CSS

p { line-height: 1.4; margin: 20px; }

#parent {
    overflow: scroll;
    height: 500px;
    border: 1px solid black;
}
#child {
    padding: 50px;
    height: 2000px;
}

JavaScript

$( 'input' ).datepicker();