fix(ui5-datetime-picker): set min width (#1698)

SAP · May 29, 2020 · 7313838 · 7313838
1 parent 1f809c9
commit 7313838
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/packages/main/src/DateTimePicker.js b/packages/main/src/DateTimePicker.js
@@ -35,6 +35,7 @@ import {
 import DateTimePickerPopoverTemplate from "./generated/templates/DateTimePickerPopoverTemplate.lit.js";
 
 // Styles
+import DateTimePickerCss from "./generated/themes/DateTimePicker.css.js";
 import DateTimePickerPopoverCss from "./generated/themes/DateTimePickerPopover.css.js";
 
 const PHONE_MODE_BREAKPOINT = 640; // px
@@ -169,6 +170,10 @@ class DateTimePicker extends DatePicker {
 		return DateTimePickerPopoverTemplate;
 	}
 
+	static get styles() {
+		return [super.styles, DateTimePickerCss];
+	}
+
 	static get staticAreaStyles() {
 		return [...super.staticAreaStyles, DateTimePickerPopoverCss];
 	}

diff --git a/packages/main/src/themes/DateTimePicker.css b/packages/main/src/themes/DateTimePicker.css
@@ -0,0 +1,3 @@
+:host .ui5-datepicker-input {
+	min-width: 15rem;
+}
diff --git a/packages/main/test/pages/DateTimePicker.html b/packages/main/test/pages/DateTimePicker.html
@@ -7,7 +7,11 @@
 	<meta http-equiv="X-UA-Compatible" content="ie=edge">
 	<title>DateTimePicker Test Page</title>
 
-	<script src="../../webcomponentsjs/webcomponents-loader.js"></script>
+    <script>
+		delete Document.prototype.adoptedStyleSheets;
+    </script>
+
+    <script src="../../webcomponentsjs/webcomponents-loader.js"></script>
 	<script src="../../resources/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../resources/bundle.es5.js"></script>
 
@@ -17,7 +21,6 @@
 		}
 
 		ui5-datetime-picker {
-			width: 300px;
 			margin-bottom: 0.25rem;
 		}
 	</style>
@@ -100,7 +103,7 @@
 			id="input1"
 			style="width: 300px">
 		</ui5-input>
-	
+
 		<br><ui5-label>Changed value</ui5-label><br>
 		<ui5-input
 			id="input2"
@@ -178,4 +181,4 @@
 
 	</script>
 </body>
-</html>
+</html>