Quick fix for when Date/Time picker is too narrow

When adding a native Date/Time picker with a small width, I find the calendar can be too narrow which breaks the design:
Screen Shot 2020-04-01 at 16.05.47

With a simple CSS rule (no plugin) we can set a custom minimum width:
Screen Shot 2020-04-01 at 16.06.42

Simply add this code into the page’s header or in an HTML element on the page:
<style>
div.picker--opened.picker--focused div.picker__holder {
min-width: 220px;
}
</style>

In this example the minimum width is set to 220px. You can adjust this to your preference.

Cheers

8 Likes