Merge pull request #1880 from nextcloud/fix/noid/datepicker-cropped

Allow to append datepicker to body
nextcloud-libraries · Apr 30, 2021 · 6c8438c · 6c8438c
2 parents c5d79e5 + be3d07f
commit 6c8438c
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/src/components/DatetimePicker/DatetimePicker.vue b/src/components/DatetimePicker/DatetimePicker.vue
@@ -81,7 +81,7 @@ export default {
 		:formatter="formatter"
 		:type="type"
 		:value="value"
-		:append-to-body="false"
+		:append-to-body="appendToBody"
 		v-bind="$attrs"
 		v-on="$listeners"
 		@select-year="handleSelectYear"
@@ -153,6 +153,11 @@ export default {
 				return new Date()
 			},
 		},
+
+		appendToBody: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	methods: {

diff --git a/src/components/DatetimePicker/index.scss b/src/components/DatetimePicker/index.scss
@@ -31,18 +31,22 @@ $cell_height: 32px;
 			color: var(--color-text-lighter);
 		}
 	}
+}
 
-	// Datepicker popup wrapper
-	.mx-datepicker-main {
-		color: var(--color-main-text);
-		border: 1px solid var(--color-border);
-		background-color: var(--color-main-background);
-		font-family: var(--font-face) !important;
-		line-height: 1.5;
+// Datepicker popup wrapper
+.mx-datepicker-main {
+	color: var(--color-main-text);
+	border: 1px solid var(--color-border);
+	background-color: var(--color-main-background);
+	font-family: var(--font-face) !important;
+	line-height: 1.5;
+
+	svg {
+		fill: var(--color-main-text);
 	}
 
-	.mx-datepicker-popup {
-		z-index: 1000;
+	&.mx-datepicker-popup {
+		z-index: 2000;
 		box-shadow: none;
 
 		.mx-datepicker-sidebar + .mx-datepicker-content {