DateBox: Placeholder alignment is not correct on iOS (T1256510) (#28927)

EugeniyKiyashko · web-flow · commit ab1707809211 · 2025-02-06T16:00:13.000+04:00
diff --git a/packages/devextreme/scss/widgets/fluent/dateBox/_index.scss b/packages/devextreme/scss/widgets/fluent/dateBox/_index.scss
@@ -135,10 +135,6 @@
   }
 }
 
-.dx-device-ios .dx-datebox.dx-texteditor-empty .dx-texteditor-input {
-  min-height: $fluent-datebox-input-min-height;
-}
-
 .dx-texteditor {
   &.dx-datebox-native {
     .dx-texteditor-input {
diff --git a/packages/devextreme/scss/widgets/fluent/dateBox/_sizes.scss b/packages/devextreme/scss/widgets/fluent/dateBox/_sizes.scss
@@ -5,4 +5,3 @@
 $fluent-datebox-overlay-item-margin: 16px !default;
 $fluent-datebox-overlay-item-margin-adaptive: 18px !default;
 $fluent-datebox-popup-content-margin: 0 34px !default;
-$fluent-datebox-input-min-height: 33px !default;
diff --git a/packages/devextreme/scss/widgets/material/dateBox/_index.scss b/packages/devextreme/scss/widgets/material/dateBox/_index.scss
@@ -143,8 +143,16 @@
   }
 }
 
-.dx-device-ios .dx-datebox.dx-texteditor-empty .dx-texteditor-input {
-  min-height: $material-datebox-input-min-height;
+.dx-device-ios .dx-datebox {
+  &.dx-texteditor-empty {
+    .dx-texteditor-input {
+      height: $datebox-input-min-height-device-ios;
+    }
+  }
+
+  input[type="date"] {
+    line-height: $datebox-input-line-height-device-ios;
+  }
 }
 
 .dx-texteditor {
diff --git a/packages/devextreme/scss/widgets/material/dateBox/_sizes.scss b/packages/devextreme/scss/widgets/material/dateBox/_sizes.scss
@@ -5,4 +5,13 @@
 $material-datebox-overlay-item-margin: 16px !default;
 $material-datebox-overlay-item-margin-adaptive: 18px !default;
 $material-datebox-popup-content-margin: 0 34px !default;
-$material-datebox-input-min-height: 33px !default;
+$datebox-input-min-height-device-ios: $material-base-inline-widget-height !default;
+$datebox-input-line-height-device-ios: null !default;
+
+@if $size == "default" {
+  $datebox-input-line-height-device-ios: normal !default;
+}
+
+@else if $size == "compact" {
+  $datebox-input-line-height-device-ios: 1.1667 !default;
+}

Original file line number	Diff line number	Diff line change
`@@ -135,10 +135,6 @@`
`135`	`135`	`}`
`136`	`136`	`}`
`137`	`137`
`138`		`-.dx-device-ios .dx-datebox.dx-texteditor-empty .dx-texteditor-input {`
`139`		`- min-height: $fluent-datebox-input-min-height;`
`140`		`-}`
`141`		`-`
`142`	`138`	`.dx-texteditor {`
`143`	`139`	`&.dx-datebox-native {`
`144`	`140`	`.dx-texteditor-input {`
Original file line number	Diff line number	Diff line change
`@@ -143,8 +143,16 @@`
`143`	`143`	`}`
`144`	`144`	`}`
`145`	`145`
`146`		`-.dx-device-ios .dx-datebox.dx-texteditor-empty .dx-texteditor-input {`
`147`		`- min-height: $material-datebox-input-min-height;`
	`146`	`+.dx-device-ios .dx-datebox {`
	`147`	`+ &.dx-texteditor-empty {`
	`148`	`+ .dx-texteditor-input {`
	`149`	`+ height: $datebox-input-min-height-device-ios;`
	`150`	`+ }`
	`151`	`+ }`
	`152`	`+`
	`153`	`+ input[type="date"] {`
	`154`	`+ line-height: $datebox-input-line-height-device-ios;`
	`155`	`+ }`
`148`	`156`	`}`
`149`	`157`
`150`	`158`	`.dx-texteditor {`