diff --git a/css/80_app.css b/css/80_app.css index 5888cd007d..e1813d0d4d 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -413,11 +413,7 @@ button.active { } button.minor { - position: absolute; - top: 0; - right: 0; height: 100%; - width: 10%; border-radius: 0; background-color: #fafafa; } @@ -2210,7 +2206,11 @@ div.combobox { .tag-row { width: 100%; position: relative; - clear: both; +} +.tag-row .inner-wrap { + width: 100%; + position: relative; + display: flex; } .tag-row.readonly, @@ -2236,14 +2236,9 @@ div.combobox { .tag-row .key-wrap, .tag-row .input-wrap-position { - width: 40%; - float: left; + flex: 1 0.5 100%; height: 30px; } -[dir='rtl'] .tag-row .key-wrap, -[dir='rtl'] .tag-row .input-wrap-position { - float: right; -} .tag-row input.key { font-weight: bold; @@ -2271,15 +2266,13 @@ div.combobox { } .tag-row button { - position: absolute; height: 31px; - right: 10%; + flex: 0 0 33px; border: 1px solid #ccc; border-top-width: 0; border-left-width: 0; } [dir='rtl'] .tag-row button { - left: 10%; border-left-width: 1px; border-right-width: 0; } @@ -2313,16 +2306,10 @@ div.combobox { } .tag-row .tag-reference-button { - right: 0; border-radius: 0; - width: 10%; - top: 0; background: #fafafa; } [dir='rtl'] .tag-row .tag-reference-button { - left: auto; - right: auto; - margin-right: 35px; border-left-width: 1px; border-right-width: 0; } @@ -2378,7 +2365,6 @@ button.minor.tag-reference-loading { } .raw-tag-editor .tag-reference-body { - float: left; width: 100%; } @@ -2387,7 +2373,7 @@ button.minor.tag-reference-loading { color: #333; } -.raw-tag-editor .tag-row:not(:last-child) .tag-reference-body { +.raw-tag-editor .tag-row:not(:last-child) .tag-reference-body.expanded { border-bottom: 1px solid #ccc; } diff --git a/modules/ui/raw_tag_editor.js b/modules/ui/raw_tag_editor.js index d5a4fb23a5..5e67edad48 100644 --- a/modules/ui/raw_tag_editor.js +++ b/modules/ui/raw_tag_editor.js @@ -106,7 +106,10 @@ export function uiRawTagEditor(context) { .attr('class', 'tag-row cf') .classed('readonly', isReadOnly); - enter + var innerWrap = enter.append('div') + .attr('class', 'inner-wrap'); + + innerWrap .append('div') .attr('class', 'key-wrap') .append('input') @@ -117,7 +120,7 @@ export function uiRawTagEditor(context) { .on('blur', keyChange) .on('change', keyChange); - enter + innerWrap .append('div') .attr('class', 'input-wrap-position') .append('input') @@ -129,7 +132,7 @@ export function uiRawTagEditor(context) { .on('change', valueChange) .on('keydown.push-more', pushMore); - enter + innerWrap .append('button') .attr('tabindex', -1) .attr('class', 'remove minor') @@ -169,9 +172,10 @@ export function uiRawTagEditor(context) { reference.showing(false); } - row - .call(reference.button) - .call(reference.body); + row.select('.inner-wrap') + .call(reference.button); + + row.call(reference.body); }); items.selectAll('input.key')