From 95fb76a5ec085df1a208dfcd83a2acd1711e5dc5 Mon Sep 17 00:00:00 2001 From: sandypockets Date: Thu, 14 Dec 2023 00:25:20 -0500 Subject: [PATCH] Fix: Absolute positioning and z-index --- dist/datepicker.css | 2 +- package.json | 2 +- src/styles/datepicker.css | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/dist/datepicker.css b/dist/datepicker.css index 9128750..c504cc2 100644 --- a/dist/datepicker.css +++ b/dist/datepicker.css @@ -1 +1 @@ -@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);.datepicker-calendar-container{border:1px solid #ddd}.datepicker-day{background-color:#f0f0f0}.datepicker-day.today{box-shadow:inset 0 0 0 2px #acacac}.datepicker-day:hover{background-color:#e0e0e0}.datepicker-day.in-range,.datepicker-day.selected{background-color:#4caf50;color:#fff}.datepicker-day.in-range{background-color:#a5d6a7}.datepicker-day.blocked{background-color:#f8f8f8;color:#ccc}.datepicker-day-names{background-color:#efefef}.datepicker-day-names>div{color:#000}button.next-month:hover,button.prev-month:hover{background-color:#e0e0e0}.dark .datepicker-calendar-container{background-color:#222;border:1px solid #555;color:#eee}.dark .datepicker-header{border-bottom:1px solid #444}.dark .datepicker-day{background-color:#333;color:#ddd}.dark .datepicker-day:hover{background-color:#444}.dark .datepicker-day.in-range,.dark .datepicker-day.selected{background-color:#3a5fd8}.dark .datepicker-day.in-range{background-color:#5675d8}.dark .datepicker-day.blocked{background-color:#1c1c1c;color:#aaa}.dark .datepicker-day-names{background-color:#4a4c52}.dark .datepicker-day-names>div{color:#ccc}.dark button.next-month,.dark button.prev-month{background-color:#4a4c52;color:#ccc}.dark button.next-month:hover,.dark button.prev-month:hover{background-color:#2e4cae}.ja .datepicker-calendar-container{height:385px}.ja .datepicker-day,.ko .datepicker-day{align-items:center;border-radius:5px;cursor:pointer;display:flex;font-size:smaller;height:50px;justify-content:center}.zh-CN .datepicker-calendar-container,.zh-TW .datepicker-calendar-container{height:385px}.ko .datepicker-day,.zh-CN .datepicker-day,.zh-TW .datepicker-day{align-items:center;border-radius:5px;display:flex;font-size:smaller;height:50px;justify-content:center}.square .datepicker-day{border-radius:5px}.round .datepicker-day,.round button.next-month,.round button.prev-month{border-radius:50%;height:30px;width:30px}.datepicker-input{border:1px solid #ddd;border-radius:5px;display:inline-block;font-family:Roboto,sans-serif;height:20px;padding:3px 7px}div.easy-dates-picker{position:relative}.datepicker-calendar-container{border-radius:5px;font-family:Roboto,sans-serif;margin-top:1px;padding:10px;position:absolute;width:275px}.datepicker-header{align-items:center;border-radius:5px;display:flex;justify-content:space-between;margin:0 0 10px;padding:5px}.datepicker-day{cursor:pointer;display:inline-block;line-height:30px;margin:0 0 5px 5px;text-align:center}.datepicker-day.past-date{cursor:not-allowed}.datepicker-day>span{display:block}.datepicker-day-names,.datepicker-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}.datepicker-day-names{border-radius:5px;margin:0 3px 5px;padding:5px 0}.datepicker-day.blocked{cursor:not-allowed}.datepicker-day.past-date,.datepicker-day.past-date.blocked{background-color:transparent}button.next-month,button.prev-month{border:none;border-radius:5px;cursor:pointer;padding:5px 12px;transition:all .1s ease-in-out} \ No newline at end of file +@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap);.datepicker-calendar-container{border:1px solid #ddd}.datepicker-day{background-color:#f0f0f0}.datepicker-day.today{box-shadow:inset 0 0 0 2px #acacac}.datepicker-day:hover{background-color:#e0e0e0}.datepicker-day.in-range,.datepicker-day.selected{background-color:#4caf50;color:#fff}.datepicker-day.in-range{background-color:#a5d6a7}.datepicker-day.blocked{background-color:#f8f8f8;color:#ccc}.datepicker-day-names{background-color:#efefef}.datepicker-day-names>div{color:#000}button.next-month:hover,button.prev-month:hover{background-color:#e0e0e0}.dark .datepicker-calendar-container{background-color:#222;border:1px solid #555;color:#eee}.dark .datepicker-header{border-bottom:1px solid #444}.dark .datepicker-day{background-color:#333;color:#ddd}.dark .datepicker-day:hover{background-color:#444}.dark .datepicker-day.in-range,.dark .datepicker-day.selected{background-color:#3a5fd8}.dark .datepicker-day.in-range{background-color:#5675d8}.dark .datepicker-day.blocked{background-color:#1c1c1c;color:#aaa}.dark .datepicker-day-names{background-color:#4a4c52}.dark .datepicker-day-names>div{color:#ccc}.dark button.next-month,.dark button.prev-month{background-color:#4a4c52;color:#ccc}.dark button.next-month:hover,.dark button.prev-month:hover{background-color:#2e4cae}.ja .datepicker-calendar-container{height:385px}.ja .datepicker-day,.ko .datepicker-day{align-items:center;border-radius:5px;cursor:pointer;display:flex;font-size:smaller;height:50px;justify-content:center}.zh-CN .datepicker-calendar-container,.zh-TW .datepicker-calendar-container{height:385px}.ko .datepicker-day,.zh-CN .datepicker-day,.zh-TW .datepicker-day{align-items:center;border-radius:5px;display:flex;font-size:smaller;height:50px;justify-content:center}.square .datepicker-day{border-radius:5px}.round .datepicker-day,.round button.next-month,.round button.prev-month{border-radius:50%;height:30px;width:30px}.datepicker-input{border:1px solid #ddd;border-radius:5px;display:inline-block;font-family:Roboto,sans-serif;height:20px;padding:3px 7px}div.easy-dates-picker{position:relative}.datepicker-calendar-container{border-radius:5px;font-family:Roboto,sans-serif;margin-top:1px;padding:10px;position:absolute;width:275px;z-index:100}.datepicker-header{align-items:center;border-radius:5px;display:flex;justify-content:space-between;margin:0 0 10px;padding:5px}.datepicker-day{cursor:pointer;display:inline-block;line-height:30px;margin:0 0 5px 5px;text-align:center}.datepicker-day.past-date{cursor:not-allowed}.datepicker-day>span{display:block}.datepicker-day-names,.datepicker-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));text-align:center}.datepicker-day-names{border-radius:5px;margin:0 3px 5px;padding:5px 0}.datepicker-day.blocked{cursor:not-allowed}.datepicker-day.past-date,.datepicker-day.past-date.blocked{background-color:transparent}button.next-month,button.prev-month{border:none;border-radius:5px;cursor:pointer;padding:5px 12px;transition:all .1s ease-in-out} \ No newline at end of file diff --git a/package.json b/package.json index 2124c07..3242103 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "easy-dates-picker", - "version": "0.1.4", + "version": "0.1.5", "description": "A super lightweight, zero dependency date picker, written in vanilla JS", "author": "sandypockets", "license": "MIT", diff --git a/src/styles/datepicker.css b/src/styles/datepicker.css index 529af5e..8bcf95d 100644 --- a/src/styles/datepicker.css +++ b/src/styles/datepicker.css @@ -20,6 +20,7 @@ div.easy-dates-picker { .datepicker-calendar-container { position: absolute; + z-index: 100; padding: 10px; margin-top: 1px; width: 275px;