I have implemented the HTML native input date element (found here- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) and encountered an issue in Safari on macOS where my date picker is being displayed off-screen. How can I resolve this by either: (a) Disabling the date picker or (b) Adjusting its position to appear above the input date text field.
https://i.sstatic.net/RQxoz.png
https://i.sstatic.net/u4SDV.png
Code:
* {
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
html,
body {
background-color: #000000;
}
#content {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 16px;
}
#actionHolder {
width: auto;
height: auto;
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
position: fixed;
bottom: 0;
right: 0;
margin: 16px;
}
input {
width: auto;
padding: 16px;
margin: 4px;
}
/* ::-webkit-calendar-picker-indicator {
display: none;
} */
button {
width: auto;
height: auto;
padding: 16px;
margin: 4px;
background-color: #e0e0e0;
}<body>
<script src="js/script.js"></script>
<div id="content">
<div id="actionHolder">
<input type="text" id="content">
<input type="date" id="date">
<button onclick="toggleOnClick()">Toggle</button>
<button onclick="addOnClick()">Add</button>
</div>
</div>
</body>View the snippet in full page mode to see the problem clearly (Safari, macOS)