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:

<a class="action zoomTo" href="javascript:void(0);">Zoom to</a>

With the esriPopup.light, instead it looks like this

<a title="Zoom" to class="action zoomTo" href="javascript:void(0);"><span>Zoom to</span></a>

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.

[DarrenWiens2]

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

[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.

[TracySchloss · Accepted solution]

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.

[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 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.