jQueryUI autocomplete hidden behind modal

Question

Here's an image of where the modal is and how it's not appearing. How do I fix it?

OP

I'm using a jQuery UI modal essentially the same as this. When I open my page and click to open a modal for registration, I'm greeted with a textbox which should auto-complete. When I put in part of a matching string, nothing appears. However, if I press the up or down arrows on my keyboard, it will scroll through matches. This leads me to believe it's hidden behind the modal.

The modal in question looks like:

<div class="remodal" data-remodal-id="modal2">
      <div class="logot">
        <div class="favicon"><img src="{% static 'img/favicon.png' %}" /></div>
        <h1>Complete the form to build your profile</h1>
        <div class="logot-iner">
          <form>
          <p>
            My name is &nbsp;&nbsp;
            <input id="firstname" type="text" placeholder="first name" />
            &nbsp;&nbsp;
            <input id="lastname" type="text" placeholder="last name" />
            and I am a  &nbsp;&nbsp;<span class="type">
            <select id="studenttype">
              <option>Full Time</option>
              <option>Part Time</option>
            </select>
            </span> &nbsp;&nbsp; student
            <br />
            <br />
            I am completing a  &nbsp;&nbsp; <span class="type">
            <select id="degreetype">
              <option>Bachelors</option>
              <option>Masters</option>
              <option>Postgraduate</option>
            </select>
            </span> &nbsp;&nbsp; degree at<br />
            <span class="type1">
            <input id="university" type="text" placeholder="uni/college" />
            </span>
            <br />
            <br />
            I study/studied &nbsp;&nbsp; <span class="type2">
            <input id="degree" type="text" placeholder="degree subject" />
            </span> &nbsp;&nbsp;and I
            am currently in my &nbsp;&nbsp;<span class="type">
            <select id="year">
              <option>First</option>
              <option>Second</option>
              <option>Third</option>
              <option>Fourth or higher</option>
            </select>
            </span> &nbsp;&nbsp; year.
            <br />
            <br />
            DOB: &nbsp;&nbsp; <span class="type3"><input id="dobday" type="text" placeholder="DD" /></span>&nbsp;&nbsp;
             <span class="type3"><input id="dobmonth" type="text" placeholder="MM" /></span> &nbsp;&nbsp;
              <span class="type3"><input id="dobyear" type="text" placeholder="YYYY" /></span> &nbsp;&nbsp;
            <br />
            <br />
            My primary skill area is &nbsp;&nbsp; <span class="type">
            <input id="skill" type="text" placeholder="skill area" />.
            </span> &nbsp;&nbsp;<br />
            <br />
            <br />
              My email is <span class="type">
            <input id="email" type="text" placeholder="email" /> and my password is <span class="type">
            <input id="password" type="password" placeholder="password" /></span></span></p>
            <a href="" id="regpost">Register</a>
          </p>
          </form>
        </div>
      </div>

but the relevant part is

<input id="university" type="text" placeholder="uni/college" />

The accompanying JS is

var fakedata = ['harvard','yale','test3','test4','uni'];
/* PICK UNI AUTOCOMPLETE */
$('input#university').autocomplete({
    source: fakedata
});

I'm guessing I need to set the z-index on something but I don't know the name of what to set it on. Any ideas?

Answer 1

Just increase the z-index as below . this will work proper.

.ui-front {
    z-index: 9999999 !important;
}