Multiple Combobox Examples: Adjust input height so text is fully visi…

…ble in Safari on iOS (pull #2780) Resolves #2778 by revising CSS for the following 4 combobox examples so that the space for the input is tall enough to fit the text when viewed in Safari on iOS. Previously, the tops of the letters were chopped off. * Editable Combobox With Both List and Inline Autocomplete * Editable Combobox With List Autocomplete * Editable Combobox without Autocomplete * Editable Combobox with Grid Popup
w3c · Oct 2, 2023 · 2b619c1 · 2b619c1
1 parent 7b0b4d3
commit 2b619c1
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/content/patterns/combobox/examples/css/combobox-autocomplete.css b/content/patterns/combobox/examples/css/combobox-autocomplete.css
@@ -13,7 +13,7 @@
   background-color: white;
   color: black;
   box-sizing: border-box;
-  height: 24px;
+  height: 30px;
   padding: 0;
   margin: 0;
   vertical-align: bottom;
@@ -46,7 +46,7 @@ ul[role="listbox"] {
   padding: 0;
   position: absolute;
   left: 4px;
-  top: 28px;
+  top: 34px;
   list-style: none;
   background-color: white;
   display: none;

diff --git a/content/patterns/combobox/examples/css/grid-combo.css b/content/patterns/combobox/examples/css/grid-combo.css
@@ -23,7 +23,7 @@
   margin: 0;
   padding: 0;
   position: absolute;
-  top: 1.7em;
+  top: auto;
   z-index: 1;
 }