'How to contain jQuery datepicker within div?

UPDATES: I tried the suggestions below but they did not work. I want to contain the calendar within the white div with a dark grey border (class = "profileEdit"), and only have its overflow viewable by scrolling. Right now, it's spilling onto profileEdit's parent divs.

SELECTED HTML

<div class="profileEdit">

            <div class="profilePic">
            </div>
            <input type="text" class="form-control" id="usernameEdit" placeholder="Damon">

            <form class="habitForm">
                <h2>MY EXERCISE HABIT</h2>
                <div class="habitFormGroup">
                    <div class="custom-select">
                        <select>
                            <option value="0">Before</option>
                            <option value="1">After</option>
                            <option value="2">During</option>
                            <option value="3">Every time</option>
                            <option value="4">When</option>
                        </select>
                    </div>
                    <input type="text" class="form-control" id="triggerEdit" placeholder="breakfast">
                    <p class="punctuation">,</p>
                </div>
                <p class="helperText">trigger</p>
                <div class="habitFormGroup lockedLesson">
                    <p>I will</p>
                    <div class="exerciseEdit"></div>
                    <p class="punctuation">.</p>
                </div>
                <p class="helperText lockedLesson" id="exerciseHelper">exercise</p>
                <div class="habitFormGroup lockedLesson">
                    <div class="exerciseEdit"></div>
                    <p>is my reward.</p>

                </div>
                <p class="helperText lockedLesson">reward</p>
            </form>
            <div class="reminderSwitch">
                <p>Remind me to perform habit</p>
                <label class="switch">
                    <input type="checkbox">
                    <span class="slider round"></span>
                </label>
            </div>
            <div>
                <form class="reminderControls">
                    <label for="startDate">Start:</label>
                    <!-- CALENDAR -->
                    <div class="dateParent">
                        <input type="text" id="datepicker" value="">
                    </div>
                </form>
            </div>
            <a href='menu.html'><button id="saveButton">Save</button></a>
        </div>

DATEPICKER JQUERY

$(function () {
$("#datepicker").datepicker();
});

DATEPICKER CSS

.profileEdit {
text-align: center;
padding: 1.5rem;
margin: 3rem 1.5rem;
border: grey solid;
border-radius: 3px;
overflow-y: scroll;
position: relative;
}

#ui-datepicker-div {
position: absolute;
width: 280px;
font-family: frutigerLight;
}

.ui-widget-header.ui-widget-header {
background: none;
background-color: white;
border: none;
}

enter image description here

UPDATE: Solution works, but messes up spacing: The space between the "Starts" toggles on and off as well.

enter image description here

enter image description here

javascripthtmljquerycssjquery-ui-datepicker


Solution 1:[1]

Try to remove height attr from calendar element. If it doesnt work check this jQuery UI inline Datepicker auto-resize to parent container

Solution 2:[2]

As a UX designer I'd think that you want to either make the containing DIV larger (personally think a popup like the calendar shouldn't extend outside it's container) or possibly change the direction that the calendar control opens in relative to the mouse position. If your trigger control is at the bottom of it's container you have the calendar pop upwards instead of down.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Filippo giacchè
Solution 2 Mike Devenney

Related Questions