I am using a bootstrap map and pulling the styles from I am using a standard esri/dijit/Popup with an esri/InfoTemplate for the infoWindow of my featureLayer. The 'zoom to' in the action pane is not displaying. As I look into the elements of the infoWindow, I see that the style is coming from esriPopup.light as opposed to just .esriPopup. Is this because of the bootstrap css I've referenced? When I look the actionPane at the bottom of a typical infoWindow, the anchor looks like this: Zoom to With the esriPopup.light, instead it looks like this Zoom to It says it's getting its style from esri.css, not the bootstrap.css. I'm not familiar with all the nuances of CSS, but I've never seen 'to class'. Is this a bug in the code? This isn't anything I wrote, I simply defined my popup and infoTemplate like I normally would. Looking at the elements, it would appear there is an attempt to have a Zoom To anchor, but in reality, there's just a narrow band where the actionPane sits.

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Potential bug: Bootstrap map, styling and popups

TracySchloss

I am using a bootstrap map and pulling the styles from <link rel="stylesheet" href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

I am using a standard esri/dijit/Popup with an esri/InfoTemplate for the infoWindow of my featureLayer. The 'zoom to' in the action pane is not displaying. As I look into the elements of the infoWindow, I see that the style is coming from esriPopup.light as opposed to just .esriPopup. Is this because of the bootstrap css I've referenced?

When I look the actionPane at the bottom of a typical infoWindow, the anchor looks like this:

With the esriPopup.light, instead it looks like this

It says it's getting its style from esri.css, not the bootstrap.css.

I'm not familiar with all the nuances of CSS, but I've never seen 'to class'. Is this a bug in the code? This isn't anything I wrote, I simply defined my popup and infoTemplate like I normally would. Looking at the elements, it would appear there is an attempt to have a Zoom To anchor, but in reality, there's just a narrow band where the actionPane sits.

Find more posts tagged with

Accepted answers

TracySchloss

I have a long-ish function that is setting my infoContent. Right before I return the formatted string I added:

  if (!dom.byId('zoomLink')){
      app.link = domConstruct.create("a",{
                "class": "action zoomTo myZoom",
                "id": "zoomLink",
                "title":"My Zoom",
                "innerHTML": "Zoom To", //text that appears in the popup for the link
                "href": "javascript: void(0);"
              }, query(".sizer", app.map.infoWindow.domNode)[1]);
        on(app.link, "click", zoomTo);
  }

The myZoom class just has a margin-left of 10px to get it to line up with the rest of the content. My zoomTo function looks like this:

function zoomTo(){
    var geom = app.currentGraphic.geometry;
    var lod = app.map.getLevel();
    if (lod < 8){
      app.map.centerAndZoom(geom,8);
    }else {
      app.map.centerAndZoom(geom, lod+1);
    }
    app.map.infoWindow.setFeatures(app.currentGraphic);
    app.map.infoWindow.show(app.currentGraphic.geometry);
}

I found that if I didn't set the infoWindow feature again, the tag didn't appear in the right place once I zoomed, Hopefully this helps someone.

All comments

TracySchloss

I couldn't figure out where to report it. I think it's specifically part of the bootstrap-map, because it works just fine when I'm using regular esri/map. I'm not savvy enough to contribute to the gitHub and when I looked around on it, I couldn't even figure out where it was coming from. I finally gave up.

ChrisSergent

Just to expand on what Darren Wiens said;

You may want to report that. That line should probably be <a title="Zoom to" class="action zoomTo" href="javascript:void(0;">

If it is code that is being served up by Esri, you will not be able to change it and you need to ask Esri to correct the file, but if you are running it locally, you can search for- to Class in your files and change the code.

TracySchloss

I have a long-ish function that is setting my infoContent. Right before I return the formatted string I added:

  if (!dom.byId('zoomLink')){
      app.link = domConstruct.create("a",{
                "class": "action zoomTo myZoom",
                "id": "zoomLink",
                "title":"My Zoom",
                "innerHTML": "Zoom To", //text that appears in the popup for the link
                "href": "javascript: void(0);"
              }, query(".sizer", app.map.infoWindow.domNode)[1]);
        on(app.link, "click", zoomTo);
  }

The myZoom class just has a margin-left of 10px to get it to line up with the rest of the content. My zoomTo function looks like this:

function zoomTo(){
    var geom = app.currentGraphic.geometry;
    var lod = app.map.getLevel();
    if (lod < 8){
      app.map.centerAndZoom(geom,8);
    }else {
      app.map.centerAndZoom(geom, lod+1);
    }
    app.map.infoWindow.setFeatures(app.currentGraphic);
    app.map.infoWindow.show(app.currentGraphic.geometry);
}

I found that if I didn't set the infoWindow feature again, the tag didn't appear in the right place once I zoomed, Hopefully this helps someone.

TracySchloss

I really don't know where that's getting set in the code. I looked around, but couldn't find it. It's something in ESRI, not in my code.

I thought I had a work around a moment ago, but realized I was adding multiple 'Zoom' links and not just one. I just about got it figured out, I think.

DarrenWiens2

Does it work if you delete the word "to"? I'm guessing they meant it to be <a title="Zoom to" class=...

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.