Member Avatar for campkev

why would the the autofill box appear two inches below the texbox?

  • 3 Contributors
  • 3 Replies
  • 79 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Kadaj

Dani AI

Generated

This is a common browser positioning quirk for native autocomplete UI when the page is shown inside an iframe. As noted the dropdown is fine outside the iframe; 's table idea can affect layout but the usual suspects are CSS transforms, scaling/zoom on an ancestor (either in the iframe or the parent page), or differences in coordinate contexts between the iframe and top page. 's offer to look is useful — reproducing with a minimal parent+child HTML is the fastest way to isolate it.

Quick checks to run from inside the child frame (same-origin) to compare where the browser thinks the input lives:

console.log(document.querySelector('input').getBoundingClientRect());

To detect transformed ancestors:

function hasTransformedAncestor(el){
  while(el && el !== document.documentElement){
    if(getComputedStyle(el).transform !== 'none') return true;
    el = el.parentElement;
  }
  return false;
}
console.log(hasTransformedAncestor(document.querySelector('input')));

If the iframe is cross-origin you cannot inspect the parent from the child; replicate locally with same-origin pages for testing. See Element.getBoundingClientRect for how coordinates are computed and see how CSS transforms create new coordinate contexts (MDN links below).

Practical fixes and workarounds:

  • Remove or avoid CSS transform/scale on ancestors (parent page or child) if possible; this often fixes the offset.
  • As a quick test, turn off browser autocomplete with autocomplete="off" to confirm the issue is the native popup.
  • If transforms are required, implement a JS-driven dropdown positioned from getBoundingClientRect() as a reliable fallback.
  • Test across browsers; positioning bugs can be engine-specific.

References: Element.getBoundingClientRect (https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect), CSS transform (https://developer.mozilla.org/en-US/docs/Web/CSS/transform)

Recommended Answers

All 3 Replies

Member Avatar for campkev

this is happening on a page stuck in an I-Frame. Works normal when not in i-frame

Member Avatar for FC Jamison

Is this something I can look at online?

I have no clue at the moment...but might be able to figure it out if I play with it.

Member Avatar for Kadaj

Are you using tables in your page, sometimes they can do strange things if they are not set up quite right.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.