Closing popup removes Navbar

399
0
12-24-2020 06:48 AM
JustinBridwell2
Occasional Contributor II

I have an esri popup in my web app MapView:

  // Add the map to a MapView
  const view = new MapView({
            container: "viewDiv",
            map: map,
            center: [-82.9001, 32.1656],
            zoom: 8,
            popup: {
                //actions: [risk_snapshot],
                actions: [],
                dockEnabled: true,
                dockOptions: {
                    buttonEnabled: true,
                    breakpoint: false
                }
            }
  });
  ...
  view.popup.open({
        // Set the popup's title to the coordinates of the clicked location
        title: "Location Coordinates: [" + lon + ", " + lat + "]",
        location: event.mapPoint, // Set the location of the popup to the clicked location
        content: setContentInfo(view.center, view.scale),
        actions: [risk_snapshot]
  });

I also have a simple Bootstrap Navbar in my app:

<nav class="navbar navbar-inverse navbar-dark bg-dark" style="margin-bottom: 5px;">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapibleMenu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a href="#" class="navbar-brand" style="color: cornflowerblue;">GA Map Viewer</a>
        </div>
        <div class="collapse navbar-collapse" id="collapibleMenu">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" style="color: cornflowerblue;">Home</a></li>
            </ul>
        </div>
    </div>
</nav>
<div id="viewDiv"></div>

For some reason, whenever, I close the popup, the navbar disappears. Any reason why this would happen or suggestions on how to fix it?

 

Navbar1.PNG

0 Replies