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

DevExpress · Feb 6, 2025 · 9cb35af · 9cb35af
1 parent 0001447
commit 9cb35af
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 8 deletions.
diff --git a/packages/devextreme-scss/scss/widgets/fluent/dateBox/_index.scss b/packages/devextreme-scss/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/scss/widgets/fluent/dateBox/_sizes.scss b/packages/devextreme-scss/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/scss/widgets/material/dateBox/_index.scss b/packages/devextreme-scss/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/scss/widgets/material/dateBox/_sizes.scss b/packages/devextreme-scss/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;
+}