fix(ui5-input): enable centering of text (#2788)

SAP · Feb 15, 2021 · bd1bd6e · bd1bd6e
1 parent 5fc108d
commit bd1bd6e
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 3 deletions.
diff --git a/packages/main/src/Input.hbs b/packages/main/src/Input.hbs
@@ -8,6 +8,7 @@
 
 		<input id="{{_id}}-inner"
 			class="ui5-input-inner"
+			style="{{styles.innerInput}}"
 			type="{{inputType}}"
 			inner-input
 			?inner-input-with-icon="{{icon.length}}"

diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
@@ -939,7 +939,11 @@ class Input extends UI5Element {
 	 * @protected
 	 */
 	get nativeInput() {
-		return this.getDomRef().querySelector(`input`);
+		return this.getDomRef() && this.getDomRef().querySelector(`input`);
+	}
+
+	get nativeInputWidth() {
+		return this.nativeInput && this.nativeInput.offsetWidth;
 	}
 
 	getLabelableElementId() {
@@ -1114,6 +1118,9 @@ class Input extends UI5Element {
 			suggestionsPopover: {
 				"max-width": `${this._inputWidth}px`,
 			},
+			innerInput: {
+				padding: this.nativeInputWidth < 48 ? "0" : undefined,
+			},
 		};
 	}
 

diff --git a/packages/main/src/themes/DatePicker.css b/packages/main/src/themes/DatePicker.css
@@ -15,7 +15,7 @@
 
 :host .ui5-date-picker-input {
 	width: 100%;
-	min-width: inherit;
+	min-width: 12.5625rem;
 	color: inherit;
 	background-color: inherit;
 	line-height: inherit;

diff --git a/packages/main/src/themes/Input.css b/packages/main/src/themes/Input.css
@@ -19,6 +19,7 @@
 	line-height: normal;
 	letter-spacing: normal;
 	word-spacing: normal;
+	text-align: start;
 }
 
 :host([focused]) {
@@ -58,7 +59,9 @@
 	-moz-appearance: textfield;
 	padding: var(--_ui5_input_inner_padding);
 	box-sizing: border-box;
-	min-width: 3rem;
+	min-width: inherit;
+	width: 100%;
+	text-align: inherit;
 	text-overflow: ellipsis;
 	flex: 1;
 	outline: none;

diff --git a/packages/main/test/pages/Input.html b/packages/main/test/pages/Input.html
@@ -307,6 +307,16 @@ <h3>Input in a Dialog</h3>
 		</ui5-input>
 	</ui5-dialog>
 
+	<h3>Short Input With Centered Text</h3>
+	<ui5-input class="short" value="244"></ui5-input>
+	<style>
+		.short {
+			width: 2.5rem;
+			min-width: 2.5rem;
+			text-align: center;
+		}
+	</style>
+
 	<script>
 		btnOpenDialog.addEventListener("click", function () {
 			dialog.open();