misc style tweaks, don't use select box

scroll when expanding additional tags

css/app.css

@@ -1561,6 +1561,7 @@ div.combobox {
     background-color: #fff;
     padding:1px 4px;
     white-space: nowrap;
+    height: 30px;
 }
 
 .combobox a:hover,
@@ -1599,14 +1600,15 @@ div.combobox {
 /* Address input */
 
 .preset-input .addr-housename {
-    width: 300px;
-    display: block;
+    border-bottom: none;
+    width:100%;
 }
 
 .preset-input .addr-number {
-    width: 50px;
+    width: 20%;
+    border-right: none;
 }
 
 .preset-input .addr-streetname {
-    width: 250px;
+    width: 80%;
 }

js/id/ui/address.js

@@ -33,6 +33,12 @@ iD.ui.preset.address = function() {
 
     function address(selection) {
 
+        selection.append('input')
+            .property('type', 'text')
+            .attr('placeholder', 'Housename')
+            .attr('class', 'addr-housename')
+            .data({ 'key': 'addr:housename' });
+
         selection.append('input')
             .property('type', 'text')
             .attr('placeholder', '123')

js/id/ui/preset.js

@@ -42,7 +42,7 @@ iD.ui.preset = function() {
 
     // generate form fields for a given field.
     function input(d) {
-        var i;
+        var i, wrap;
         switch (d.type) {
             case 'text':
                 i = this.append('input')
@@ -79,18 +79,20 @@ iD.ui.preset = function() {
                     });
                 break;
             case 'select':
-                this.append('select')
-                    .selectAll('options')
-                    .data([''].concat(d.options.slice()))
-                    .enter().append('option')
-                        .attr('value', function(d) { return d; })
-                        .attr('label', function(d) { return d; });
+                wrap = this.append('span').attr('class', 'input-wrap-position'),
+                i = wrap.append('input').attr('type', 'text');
+                wrap.call(d3.combobox().data(d.options.map(function(d) {
+                    return {
+                        title: d,
+                        value: d
+                    };
+                })));
                 break;
             case 'combo':
-                var w = this.append('span').attr('class', 'input-wrap-position'),
-                    combobox = d3.combobox();
-                i = w.append('input').attr('type', 'text');
-                w.call(combobox);
+                var combobox = d3.combobox();
+                wrap = this.append('span').attr('class', 'input-wrap-position'),
+                i = wrap.append('input').attr('type', 'text');
+                wrap.call(combobox);
                 taginfo.values({
                     key: d.key
                 }, function(err, data) {

js/id/ui/taglist.js

@@ -14,8 +14,9 @@ iD.ui.Taglist = function() {
                 .text('Additional tags')
                 .on('click', function() {
                     wrap.call(iD.ui.Toggle(wrap.classed('hide')));
-                })
-        };
+                    selection.node().parentNode.scrollTop += 200;
+                });
+        }
 
         var wrap = selection.append('div');