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
        // 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>
            <a href="#" class="navbar-brand" style="color: cornflowerblue;">GA Map Viewer</a>
        <div class="collapse navbar-collapse" id="collapibleMenu">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#" style="color: cornflowerblue;">Home</a></li>
<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?

enter image description here


The fix for this was simple; although it still moves the view down whenever the popup closes. But it creates a scroll on the right, allowing the user to scroll up and makes the navbar visible again. Basically, the change I made was to add fixed-top to the class.

<nav class="navbar navbar-inverse navbar-dark bg-dark fixed-top" style="margin-bottom: 2px;"> 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.