0

I'm using the Bootstrap 4 theme and I've added a jQuery autocomplete search box to it. The problem I'm having though is the top of the suggest box is showing up behind the nav bar. How can I pull this to forefront? Here's the a working example of the problem: https://jsfiddle.net/phenkels/dwhzdg7b/11/. And a snippet of the HTML code:

<body>
  <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation" style="margin-bottom: 0">
    <div class="navbar-header">
      <a class="navbar-brand" href="/">DASHBOARD</a>
    </div>

    <!-- Start Search Bar -->
    <div class="ui-widget nav navbar-nav" id="search-wrapper">
      <div class="input-group ">
        <input id="tags" placeholder="Search..." autocomplete=off>
      </div>
    </div>
    <!-- End Search Bar -->

  </nav>
</body>
pheeper
  • 1,457
  • 4
  • 20
  • 37

1 Answers1

4

Adding this CSS will increase the z-index:

#ui-id-1 {z-index: 9999;}

Fiddle: https://jsfiddle.net/7z7Lj6pw/

Preview

preview

Soolie
  • 1,812
  • 9
  • 21
  • Can you tell me where that is tying back into? I see that it works, but don't understand why – pheeper Nov 20 '17 at 17:57
  • @Phillip It is because, the autosuggest list doesn't have a `z-index` set and since it is positioned absolute, lacking `z-index` makes it default to `0`, while bootstrap's nav bar generally has `z-index` of higher values. Hence the issue. – Soolie Nov 20 '17 at 18:07
  • @Phillip Let me know if you need more clarification. Happy to help you... – Soolie Nov 20 '17 at 18:10
  • of course. I'm just trying to understand where `#ui-id-1` comes from as it works in the jsfiddle, but I'm not able to replicate it in my app. It appears as if it's created automatically from the ui-widget class, can you confirm? – pheeper Nov 20 '17 at 18:12
  • Never mind, I was able to get it working in my app. Thanks! – pheeper Nov 20 '17 at 18:19
  • @Phillip I inspected the element and found that the list that is held in the `
      ` tag, which is the autocomplete one, has an id of `#ui-id-1`. So this means, it wasn't created by you but jQuery UI autocomplete? In that case, you should find a common class and then target the CSS. :)
     – Soolie Nov 20 '17 at 18:23