Skip to content

Commit

Permalink
Improve combobox option visibility
Browse files Browse the repository at this point in the history
(closes openstreetmap#4761)

This improves the usability of the combobox when it appears over
other rows of fields (e.g. raw tag editor)
1. shrink size on left/right to provide more separation from content beneath
2. adjust box shadow for slightly more visibility
3. shrink size of first option by one pixel, so that the combobox
   options will never perfectly line up with rows that they cover
  • Loading branch information
bhousel committed Feb 12, 2018
1 parent aa34a05 commit 013253e
Show file tree
Hide file tree
Showing 2 changed files with 5 additions and 4 deletions.
5 changes: 3 additions & 2 deletions css/80_app.css
Original file line number Diff line number Diff line change
Expand Up @@ -1883,7 +1883,7 @@ input[type=number] {
div.combobox {
z-index: 9999;
display: none;
box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
box-shadow: 0 4px 10px 1px rgba(0,0,0,.2);
margin-top: -1px;
background: white;
max-height: 120px;
Expand All @@ -1896,7 +1896,7 @@ div.combobox {
.combobox a {
display: block;
padding: 5px 10px;
border-top:1px solid #ccc;
border-top: 1px solid #ccc;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
Expand All @@ -1909,6 +1909,7 @@ div.combobox {

.combobox a:first-child {
border-top: 0;
padding: 4px 10px;
}

.combobox-caret {
Expand Down
4 changes: 2 additions & 2 deletions modules/lib/d3.combobox.js
Original file line number Diff line number Diff line change
Expand Up @@ -265,8 +265,8 @@ export function d3combobox() {
var rect = node.getBoundingClientRect();

wrapper
.style('left', rect.left + 'px')
.style('width', rect.width + 'px')
.style('left', (rect.left + 5) + 'px')
.style('width', (rect.width - 10) + 'px')
.style('top', rect.height + rect.top + 'px');
}

Expand Down

0 comments on commit 013253e

Please sign in to comment.