Jquery UI Autocomplete Positioning Wrong

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

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!

jquery ui autocomplete positioning wrong

Woohoo. Found the culprit:

<script type="text/javascript" src="/scripts/jquery/132/jquery-1.4.2.min.js"></script>
            <script type="text/javascript" src="/scripts/jquery/132/jquery-ui-1.8.custom.min.js"></script>
            <script type="text/javascript" src="/scripts/jquery/100325/jquery.dimensions.js"></script>
            <script type="text/javascript" src="/scripts/jquery/100325/jquery.tooltip.js"></script>

Don't include jquery.dimensions.js. I assume it's already in jquery-ui.js ... anyway, it fixed my problem.

For latest jqueryUI you now need to include jquery.ui.position.js

JQuery autocomplete dropdown menu position

As you mentioned, the autocomplete dropdown menu appends to the body. Because of the absence of appendTo option

Regardless of the value, if no element is found, the menu will be
appended to the body.

By providing the option to the div with an absolute position solves the issue.

HTML

<input id="foodautotest" type="text" placeholder="autocomplete">
<div id="autocomplete-cont"></div>

JS

appendTo: '#autocomplete-cont',

CSS

#autocomplete-cont {
  position: absolute;
}

DEMO

var strfoods = ["Bread", "Beef", "Mango", "Salad", "Eggs", "Chicken", "Pork", "Cabagge", "Ice Cream", "Banana", "Rice", "Xmas Cake", "Cassava", "Potatochip", "Chickhen Curry", "Steak Sandwich", "Bbq Pork", "Pavalova", "Calamari", "Sushi", "Roast Beef", "Duck", "Asparagus"]

function getVectors(VectorTypeID) {

  console.log("Got Vectors:", strfoods);

  $("#foodautotest").autocomplete({

    appendTo: '#autocomplete-cont',

    source: strfoods

  });

}

getVectors();

body {

  color: #000;

  font-family: Tahoma;

  font-size: 15px;

  height: 100%;

  margin: 0;

  padding: 0;

  position: absolute;

  width: 100%;

  overflow: auto;

  overflow-x: hidden;

  display: contents;

}

#container {

  display: grid;

  grid-template-areas: "fixedpart""movingpart";

  grid-template-columns: 1fr

}

/* placement and layout of items in container grids  */

#fixedpart {

  grid-area: fixedpart;

  display: grid;

  grid-template-areas: "mainnav""caselabel""case";

  grid-template-columns: 1fr;

  position: fixed;

  width: 100%;

  z-index: 3;

}

#movingpart {

  grid-area: movingpart;

  display: grid;

  grid-template-areas: "interviewlabel interviewlabel""interview interview""investigation information";

  grid-template-columns: 450px 1fr;

  /*  margin-top: 195px; */

}

@media screen and (max-width:1280px) {

  #movingpart {

    grid-template-columns: 350px 1fr

  }

}

/* placement and layout of items in fixedpart grids  */

#mainnav {

  grid-area: mainnav;

  padding: 10px;

  display: grid;

  grid-template-areas: "button form fullscreen";

  grid-template-columns: max-content max-content 1fr;

  grid-gap: 10px;

  background-color: white;

  width: 99%;

}

#caseform {

  display: grid;

  grid-template-rows: repeat(4, auto);

  grid-template-areas: "name""comments""nav""error";

}

#caseslabel {

  grid-area: caselabel;

  border-bottom: rgb(232, 205, 201) solid thin

}

#caseform {

  grid-area: case;

  padding: 0 10px 10px;

}

/* placement and layout of items in movingpart grids  */

#interviewlabel {

  grid-area: interviewlabel

}

#interviewform {

  grid-area: interview;

  padding: 10px;

  display: grid;

  grid-template-areas: "date firstname lastname age address phone email""gotsick comments comments comments comments comments comments ""nav nav nav nav nav nav nav""error error error error error error error";

  grid-gap: 10px;

  grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1fr 1fr;

}

#investigation {

  grid-area: investigation;

}

#result {

  grid-area: information;

}

#investigation,

#result {

  display: grid;

  grid-template-areas: "nav""display";

  grid-template-rows: 40px 1fr;

}

/* placement and layout of items in mainnav grids  */

#mainnav>form {

  grid-area: form

}

#mainnav form {

  display: none;

  grid-row-gap: 10px;

}

}

/* placement and layout of items in casenamediv and casecommentsdiv grids  */

#casenamediv p,

#casecommentsdiv p {

  grid-area: label;

}

#casename,

#casecomments {

  grid-area: input;

}

/* placement and layout of items in investigation div grids  */

#investigatornav {

  grid-area: nav;

  display: grid;

  grid-template-areas: "button""ul";

  grid-template-rows: 40px 1fr;

}

#mealform {

  grid-area: display;

  display: grid;

  grid-template-areas: "date time""provider provider""food food""comments comments""nav nav";

  grid-template-columns: 1fr 1fr;

  padding: 10px;

  grid-gap: 10px;

}

/* placement and layout of items in mealform grids  */

#mealdatediv {

  grid-area: date;

  display: grid

}

#mealtimediv {

  grid-area: time;

  display: grid

}

#mealproviderdiv {

  grid-area: provider;

  grid-template-areas: "searchbox""button";

  display: grid;

}

#foodconsumeddiv {

  grid-area: food

}

#mealcommentsdiv {

  grid-area: comments

}

#mealnavigatior {

  grid-area: nav

}

/* end grid setup */

p {

  padding: 0;

  margin: 0;

}

input,

textarea {

  border: grey thin solid;

}

.pac-container {

  display: none;

}

/*Color scheme */

.casecol {

  background-color: rgb(232, 205, 201)

}

.interviewcol {

  background-color: rgb(177, 188, 173)

}

.bodycol {

  background-color: rgb(244, 252, 242)

}

.buttoncol {

  background-color: rgb(226, 216, 216)

}

.labelcol {

  background-color: rgb(221, 221, 221)

}

/*End Color Scheme */

#toggle {

  background-color: transparent;

  border: none;

  padding: 0

}

#interviewlabel {

  border-bottom: rgb(177, 188, 173) solid thin

}

#btnfirst {

  border-bottom-left-radius: 10px;

  border-top-left-radius: 10px;

}

#btnlast {

  border-bottom-right-radius: 10px;

  border-top-right-radius: 10px;

}

#btnnew {

  margin-left: 10px;

}

#mealsdiv {

  background-color: rgb(244, 252, 242);

}

#result {

  background-color: rgb(244, 252, 242);

  border-left: black thin solid;

}

#interviewnavigatior {

  padding-top: 1%

}

.maindivslabel {

  text-align: center;

  background-color: rgb(221, 221, 221);

  padding: 5px 0

}

.ta {

  text-align: center

}

#mealform {

  overflow: hidden;

  margin: 10px;

  border: thin black

}

#autocomplete-cont {

  position: absolute;

}

<!DOCTYPE HTML>

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js"></script>

  <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">

  <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

</head>

<body class="bodycol">

  <div id="container">

    <div id="fixedpart">

      <div class="interviewcol maindivslabel" id="caseslabel">

        <span>CASES</span>

      </div>

      <form name="caseform" class="casecol" id="caseform"></form>

    </div>

    <div id="movingpart">

      <div class="interviewcol maindivslabel" id="interviewlabel">

        <span>INTERVIEWS</span>

      </div>

      <form id="interviewform" class=" interviewcol"> </form>

      <div id="investigation">

        <div id="investigatornav">

          <ul class="buttoncol"></ul>

        </div>

        <form id="mealform" name="mealform">

          <div class="flddiv fw" id="mealcommentsdiv">

            <input id="foodautotest" type="text" placeholder="autocomplete">

            <div id="autocomplete-cont"></div>

          </div>

        </form>

      </div>

      <div id="result">

        <div id=navdiv class="buttoncol">

          <div id="uldiv">

            <ul id="resultnav" class="buttoncol"></ul>

          </div>

        </div>

      </div>

    </div>

  </div>

</body>

jQuery UI Autocomplete open position

Well, after reading jQuery bug ticket about this exact problem, i looked again at my CSS class and found that i have overridden the property "top" with 100% value.
removed it and it fixed the problem :) :)

jQuery autocomplete's options are in the wrong position

Turns out it was because I wasn't including jquery-ui.js. Duh.

---

Related Topics