StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POJqueryUi Autocomplete shown in wrong place when using input field in div with position:fixed
text
Body
copied!<p>I have a "<em>modal window</em>" in a webpage obtained by applying to a <code>div</code> the css property <code>position</code> to <code>fixed</code>. The <code>div</code> contains input fields. In particular, I'm using the <em>autocomplete widget</em> from <strong>jQueryUI</strong>. There are two major problems:</p> <p>1) the first is that, since the div has a fixed position, when you scroll down the webpage, the autocomplete suggestions are not shown fixed but are moved up and down with the page. You can see that problem at this <strong><a href="http://codepen.io/anon/pen/ALlpy">Codepen</a></strong> where I'm using an example from jQuery website with city-name autocompletion.</p> <p>2) The second problem is that the suggestions from autocomplete are shown in the upper-left corner of the page and not just below the input field. Unfortunately, I tried to reproduce this problem in Codepen, but I can't.</p> <p>I'm quite sure that the problem is due to the CSS, and in particular to such style properties provided by the JQuery-UI. Maybe the problem can be resolved by using the <a href="http://jqueryui.com/demos/autocomplete/#option-position">position option</a> of the autocomplete widget.</p> <p><strong>What CSS property should I define and how?</strong></p> <p>PS: I use the theme provided at <em><a href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css</a></em>. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload