Fix combobox bugs

- size and position is recalculated for each
  update so that it works even if input
  isn't rendered when combobox is called
- adds caret differently, for same reason as above
- adds combobox to body to prevent scrolling issues

css/app.css

@@ -7,6 +7,7 @@ body {
     padding:0;
     min-width: 768px;
     color:#222;
+    overflow: hidden;
     /* text-rendering: optimizeLegibility;  */
     -webkit-font-smoothing: subpixel-antialiased;
 }
@@ -1546,15 +1547,11 @@ div.combobox {
     border-top: 0;
 }
 
-.combobox-carat::after {
-    display:block;
-    content: '';
+.combobox-carat {
+    margin-left: -15px;
+    margin-right: 5px;
+    display:inline-block;
     cursor:url(../img/cursor-pointer.png) 6 1, auto;
-    position: absolute;
-    right: 10px;
-    top: 5px;
-    height: 0;
-    width: 0;
     border-top: 5px solid #ccc;
     border-left: 5px solid transparent;
     border-right: 5px solid transparent;

js/lib/d3.combobox.js

@@ -12,34 +12,34 @@ d3.combobox = function() {
     };
 
     var typeahead = function(selection) {
-        var idx = -1,
-            rect = selection.select('input')
-                .node()
-                .getBoundingClientRect();
+        var idx = -1;
         input = selection.select('input');
 
-        container = selection
+        container = d3.select(document.body)
             .insert('div', ':first-child')
             .attr('class', 'combobox')
             .style({
                 position: 'absolute',
                 display: 'none',
-                left: '0px',
-                width: rect.width + 'px',
-                top: rect.height + 'px'
+                left: '0px'
             });
 
-        selection
-            .insert('a', ':first-child')
+        selection.append('a', selection.select('input'))
             .attr('class', 'combobox-carat')
-            .style({
-                position: 'absolute',
-                left: rect.width + 'px',
-                top: '0px'
-            })
             .on('mousedown', stop)
             .on('click', click);
 
+        function updateSize() {
+            var rect = selection.select('input')
+                .node()
+                .getBoundingClientRect();
+            container.style({
+                'left': rect.left + 'px',
+                'width': rect.width + 'px',
+                'top': rect.height + rect.top + 'px'
+            });
+        }
+
         function stop() {
             // prevent the form element from blurring. it blurs
             // on mousedown
@@ -156,6 +156,8 @@ d3.combobox = function() {
                 if (data.length) show();
                 else hide();
 
+                updateSize();
+
                 var options = container
                     .selectAll('a.combobox-option')
                     .data(data, function(d) { return d.value; });