fix for tab completion popup positioning

Fixes kubernetes-sigs#74
starpit · Dec 10, 2018 · 41768b8 · 41768b8
1 parent 8fcb4ce
commit 41768b8
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/app/plugins/modules/core-support/src/lib/tab-completion.ts b/app/plugins/modules/core-support/src/lib/tab-completion.ts
@@ -280,14 +280,16 @@ const makeCompletionContainer = (block, prompt, partial, dirname?, lastIdx?) =>
   // determine pixel width of current input value
   const tmp = document.createElement('div')
   tmp.style.display = 'inline-block'
+  tmp.style.fontSize = '0.925em'
   tmp.style.opacity = '0'
+  tmp.style.position = 'absolute'
   tmp.innerText = input.value.substring(0, input.selectionStart)
-  document.body.appendChild(tmp)
+  block.appendChild(tmp)
   const inputWidth = tmp.clientWidth
-  document.body.removeChild(tmp)
+  block.removeChild(tmp)
 
   const { left, width: containerWidth } = input.getBoundingClientRect()
-  const desiredLeft = left + inputWidth - 5
+  const desiredLeft = inputWidth + 12
 
   if (desiredLeft + inputWidth < containerWidth) {
     // the popup likely won't overflow to the right

diff --git a/app/plugins/modules/core-support/web/css/tab-completion.css b/app/plugins/modules/core-support/web/css/tab-completion.css
@@ -1,4 +1,5 @@
 .tab-completion-temporary {
+    margin-top: 0.375em;
     display: inline-block;
     background: var(--color-field-01);
     flex-direction: column;