Improve combobox dropdown styling

re: #1389 re: openstreetmap/iD#10127 re: openstreetmap/iD#10144
facebook · Apr 29, 2024 · d2a7c9b · d2a7c9b
1 parent 52ac671
commit d2a7c9b
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 28 deletions.
diff --git a/css/80_app.css b/css/80_app.css
@@ -1324,24 +1324,24 @@ a.hide-toggle {
 }
 
 /*
-    The parts of a field:
-    - `.form-field` is a `div` wraps the entire thing
-    - `.field-label` is a `label` that wraps the top part, it contains;
-       - `span` classed `label-text`
-       - 0..n buttons for "remove", "modified", "tag reference"
-    - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
-       - usually an `input`
-       - sometimes some buttons (translate, increment, decrement)
-       - or could just be a `div` with anything really
-    - `.tag-reference-body` at the bottom (usually hidden)
-
-   .------------------.                             -
-   |  Name        | i |  <- .field-label        |
-   +------------------+                               |
-   |  Starbucks   | + |  <- .form-field-input-wrap     >  .form-field
-   '------------------'                               |
-     tag reference       <- .tag-reference-body      |
-                                                    -
+  The parts of a field:
+  - `.form-field` is a `div` wraps the entire thing
+  - `.field-label` is a `label` that wraps the top part, it contains;
+   - `span` classed `label-text`
+   - 0..n buttons for "remove", "modified", "tag reference"
+  - `.form-field-input-wrap` is a `label` or `div` that wraps the bottom part, it contains;
+   - usually an `input`
+   - sometimes some buttons (translate, increment, decrement)
+   - or could just be a `div` with anything really
+  - `.tag-reference-body` at the bottom (usually hidden)
+
+ .------------------.                           -
+ |  Name        | i |  <- .field-label           |
+ +------------------+                             |
+ |  Starbucks   | + |  <- .form-field-input-wrap   >  .form-field
+ '------------------'                             |
+   tag reference       <- .tag-reference-body    |
+                                                -
 */
 
 .form-field {
@@ -1517,11 +1517,11 @@ a.hide-toggle {
     display: flex;
     flex-flow: row nowrap;
 }
-.form-field ul.rows li.labeled-input > span,
 .form-field ul.rows li.labeled-input > div {
     flex: 1 1 auto;
     width: 100%;
     border-radius: 0;
+    line-height: 0.95rem;
 }
 .form-field ul.rows li input {
     border-radius: 0;
@@ -1540,6 +1540,28 @@ a.hide-toggle {
     border-right-width: 1px;
 }
 
+/* Field - lists with labeled input items as table
+------------------------------------------------------- */
+.form-field ul.rows.rows-table {
+    display: table;
+    width: 100%;
+}
+.form-field ul.rows.rows-table li.labeled-input {
+    display: table-row;
+}
+.form-field ul.rows.rows-table li.labeled-input > div:first-child {
+    display: table-cell;
+    width: auto;
+    max-width: 170px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.form-field ul.rows.rows-table li.labeled-input > div:nth-child(2) {
+    display: table-cell;
+    width: auto;
+}
+
 
 /* Field - Structure
 ------------------------------------------------------- */
@@ -2166,9 +2188,8 @@ div.combobox {
     display: block;
     padding: 5px 10px;
     border-top: 1px solid #ccc;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    line-height: 0.95rem;
+    break: all;
 }
 
 .combobox a.selected,

diff --git a/modules/ui/fields/access.js b/modules/ui/fields/access.js
@@ -38,7 +38,7 @@ export function uiFieldAccess(context, uifield) {
       .attr('class', d => `labeled-input preset-access-${d}`);
 
     enter
-      .append('span')
+      .append('div')
       .attr('class', 'label preset-label-access')
       .attr('for', d => `preset-input-access-${d}`)
       .html(d => uifield.tHtml(`types.${d}`));

diff --git a/modules/ui/fields/cycleway.js b/modules/ui/fields/cycleway.js
@@ -34,7 +34,7 @@ export function uiFieldCycleway(context, uifield) {
 
         div = div.enter()
             .append('ul')
-            .attr('class', 'rows')
+            .attr('class', 'rows rows-table')
             .merge(div);
 
         var keys = ['cycleway:left', 'cycleway:right'];
@@ -47,7 +47,7 @@ export function uiFieldCycleway(context, uifield) {
             .attr('class', function(d) { return 'labeled-input preset-cycleway-' + stripcolon(d); });
 
         enter
-            .append('span')
+            .append('div')
             .attr('class', 'label preset-label-cycleway')
             .attr('for', function(d) { return 'preset-input-cycleway-' + stripcolon(d); })
             .html(function(d) { return uifield.tHtml('types.' + d); });

diff --git a/modules/ui/fields/radio.js b/modules/ui/fields/radio.js
@@ -126,7 +126,7 @@ export function uiFieldRadio(context, uifield) {
             .attr('class', 'labeled-input structure-type-item');
 
         typeEnter
-            .append('span')
+            .append('div')
             .attr('class', 'label structure-label-type')
             .attr('for', 'preset-input-' + selected)
             .html(l10n.tHtml('inspector.radio.structure.type'));
@@ -171,7 +171,7 @@ export function uiFieldRadio(context, uifield) {
             .attr('class', 'labeled-input structure-layer-item');
 
         layerEnter
-            .append('span')
+            .append('div')
             .attr('class', 'label structure-label-layer')
             .attr('for', 'preset-input-layer')
             .html(l10n.tHtml('inspector.radio.structure.layer'));

diff --git a/modules/ui/fields/wikidata.js b/modules/ui/fields/wikidata.js
@@ -106,7 +106,7 @@ export function uiFieldWikidata(context, uifield) {
             .attr('class', function(d) { return 'labeled-input preset-wikidata-' + d; });
 
         enter
-            .append('span')
+            .append('div')
             .attr('class', 'label')
             .html(function(d) { return l10n.tHtml('wikidata.' + d); });