JqueryUi Autocomplete shown in wrong place when using input field in div with position:fixed


Tags: css,jquery-ui,input,position,jquery-ui-autocomplete

Problem :

I have a "modal window" in a webpage obtained by applying to a div the css property position to fixed. The div contains input fields. In particular, I'm using the autocomplete widget from jQueryUI. There are two major problems:

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 Codepen where I'm using an example from jQuery website with city-name autocompletion.

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.

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 position option of the autocomplete widget.

What CSS property should I define and how?

PS: I use the theme provided at http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css.



Solution :

Looking at the jQuery UI library, I see that the <ul> element is used to show the suggestions. jQuery UI appends this element by default to the HTML document and not to the <div> (used as "modal window") of the text input.

However, the documentation shows that the option appendTo configures which element the autocomplete <ul> should be appended to. It uses jQuery's appendTo() function. http://jqueryui.com/demos/autocomplete/#option-appendTo

So, I included a div to contains the suggestions:

<input type="text" id="myInput" />
<div id="container">
</div>

And in the autocomplete() function I added the option:

appendTo: "#container"

Then I added the following CSS

#container {
    display: block; 
    position:relative
} 
.ui-autocomplete {
    position: absolute;
}

That's all!


    CSS Howto..

    How to combine class and ID in CSS selector?

    How can I align a div at the edge of a div above it when said div is using automatic positioning?

    How to restrict zoom of webpage to stretch when iPhone and Android in landscape orientation?

    How to stop css inheritance in sub unorder list

    CSS: overlay looks fine on Chrome, but not in Firefox 3: how do I fix the vertical offset?

    How to apply a underline style to piece of text

    How to align the inside box to center of the table

    How can i make each div look like seperate block?

    How to prevent rendering css when loading stylesheet from local storage?

    How can I make my web page load faster?

    How do i prevent my CSS affecting external plugins?

    how do i inject css in gwt?

    How do I change a specific css element with javascript?

    Make Dojo or Ext JS4 widgets look and behave like Kendo UI. How demanding will it be?

    How to set different table widths using CSS or jQuery?

    How proper add 2 CSS file in a WordPress theme?

    CSS: How does youtube change its appearance based on screen size?

    how to scale an image disproportionally via css?

    How to implement :parent selector in css

    How to put text on top of a pattern overlay CSS

    How to handle text wrapping in CSS? [duplicate]

    How to align
  • to the top when higher items are hidden via CSS
  • How to set different body background color for different pages in one css files?

    How to set minimum height to the 100% of the viewing screen and half of the page?

    How to apply SVG filter to an element?

    How to make height in CSS responsive?

    Cakephp how to remove underline on links

    How to insert instance variable as css rule in Rails?

    How to use “css” in the “jsp” in Spring MVC project?

    How to get the table (datatable) left aligned?