0

With Bootstrap 3 navigation bar, I want to display Google place options on an input text field. Following is the screen shot for same:

enter image description here

As can be seen from screen shots, when navbar is fixed, options are displayed at the back. And, when navbar is static, options are displayed as expected. I want the options to be displayed properly when navbar is fixed.

I tried to point the code on bootply but, it's not working. Working code at JSFiddle. Also, code is as under:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Navbar Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>

  </head>

  <body style="min-height:      2000px;">

    <div class="container">

      <!-- Static navbar -->
      <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Find <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li>
                    <form class="navbar-form navbar-left" role="search">
                      <div class="form-group">
                        <input type="text" name="search" style="width: 20em;" class="form-control" placeholder="Search">
                      </div>
                      <button type="submit" class="btn btn-default">Submit</button>
                    </form>
                </li>
              </ul>
            </li>
          </ul>

        </div><!--/.nav-collapse -->
      </div>



    </div> <!-- /container -->


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  </body>
</html>

<script>

    window.onload = function() {

        var options = {
            types: ['geocode']
        };

        var inputField;     
        inputField = document.getElementsByName( 'search' )[0];
        new google.maps.places.Autocomplete( inputField, options );

    };

</script>

Please help.

Thanks much in advance!

lupchiazoem
  • 8,026
  • 6
  • 36
  • 42

1 Answers1

2

This is because of the z-index of your elements. Try changing the z-index of .pac-container. Example: .pac-container { z-index: 9999; }.

Nishant
  • 821
  • 7
  • 17
  • I suppose z-index is common for all types of navigations' bar. The only change between two outputs is class, one is 'navbar-fixed-top' and other is 'navbar-static-top'. Thanks for pointing about JSFiddle, code on it @ http://jsfiddle.net/sannidhi/WLQjp/. – lupchiazoem Dec 17 '13 at 16:47
  • Just tried to edit the fiddle and it is exactly what i said it was :) increase z-index of pac-container `.pac-container { z-index: 9999;}` try this. – Nishant Dec 17 '13 at 17:08
  • Cool, that works! But, pls help me understand what's pac-container as I do not find it in either of two bootstrap files. – lupchiazoem Dec 17 '13 at 17:31
  • i haven't looked at it too much in detail right now but it is the class of the div that contains the suggestions of country/city names i think it might have come from plugin or script that you are using to load those suggestions and as it has a google logo at the end of it so may be it is from some external script not bootstrap :) – Nishant Dec 17 '13 at 17:37
  • All: A value of >= `1030` for `z-index` of `pac-container` class will work. – lupchiazoem Dec 17 '13 at 18:05
  • All: Another [thread](http://stackoverflow.com/questions/10957781/google-maps-autocomplete-result-in-bootstrap-modal-dialog) of interest. – lupchiazoem Dec 17 '13 at 18:10