diff --git a/css/app.css b/css/app.css index 511df7c30..84b02fbe1 100644 --- a/css/app.css +++ b/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; diff --git a/js/lib/d3.combobox.js b/js/lib/d3.combobox.js index d09a0f4fd..8bb6e564e 100644 --- a/js/lib/d3.combobox.js +++ b/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; });