Don't want a title on infoTemplate, but still want X to close

[TracySchloss]

I would rather not have a title to my infoTemplate window.  I don't need to repeat the name of the location again, when I want it as part of the content and if you title it something like "Location Information", all I can think is "Duh, of course it's the location information, I just clicked it!".  If you don't set any title, you still get one, but it's set to ObjectID, which not many people care to see.

Trying infoTemplate.setTitle("") you still get objectid as your title.  If you set it to infoTemplate.setTitle(" "), with a blank space, then you can have no title. However now the whole header is left off, and I still want it to have an X to close, along with any next, previous arrow that might come with having multiple features selected.

I looked at the infoWindowLite, but I don't like the big red X as a substitute for an anchor pointing to an element.

I'm creating a plain infoTemplate, then populating it with a function.  I've tried map with a popup parameter and without one and that makes no difference.

var infoTemplate = new InfoTemplate();

 var   featureLayer =  new FeatureLayer(pathName+"/arcgis/rest/services/MDA/sampleGeocodeEdit/FeatureServer/0",{
        id:"featureLayer",
        outFields:['*'],
        infoTemplate:infoTemplate
     });
     featureLayer.renderer = renderer;
     featureLayer.setSelectionSymbol(highlightMarkerSymbol);
     
 //edit the selected feature    
     var selectQuery = new Query();
     
     on(featureLayer, "click", function(evt){
       formatString = "";
       var  objectId = evt.graphic.attributes[featureLayer.objectIdField];
        selectQuery.objectIds = [objectId];
        featureLayer.selectFeatures(selectQuery);      
     });
    on(featureLayer, "error", function (err){
      console.log("error with featureLayer; " + err.message);
    });
    
    on(featureLayer, 'selection-complete', setWindowContent);
   
function setWindowContent(results){
   map.infoWindow.resize(240, 100);
     var imageString = "<table><tr>";
     var imageStyle = "alt='site image' style='height=:40px width:40px float:left'";
     var deferred = new Deferred;
      var graphic = results.features[0];
      var  objectId = graphic.attributes[featureLayer.objectIdField]; 
         
      featureLayer.queryAttachmentInfos(objectId).then(function(response){
          var imgSrc;
          if (response.length === 0) {
              deferred.resolve("no attachments");
          }
          else {
              imgSrc = response[0].url;
              imageString += "<td><img src='" + imgSrc + "' " + imageStyle + "></td>";
              formatString += imageString;
              domConstruct.empty("attachPreviewDiv");
              domConstruct.create("img", {
                  src: imgSrc
              }, "attachPreviewDiv");
          }
          formatString += "<td><b>" + graphic.attributes.Facility + "</b><br/>" + graphic.attributes.Address + "<br/>" +
          graphic.attributes.City +  ", " + graphic.attributes.State +
          "<td></tr></table>";
          
          infoTemplate.setContent(formatString);
          infoTemplate.setTitle(" ");
      });
   map.enableMapNavigation();
 }    

[TracySchloss]

What's the syntax for checking the browser on page load?  I'm not sure where that goes.

[SteveCole]

Dojo has browser detection built it which you can read up on here.

The other option is actually over on the HTML side of things in the header using conditional statements. Now, I'm not sure this still works- it may- but it's one way of doing it.

For the Dojo side, something like this...

require(["dojo/has", "dojo/_base/sniff"], function(has){
  if(has("ie")){ // only IE
       var fileref= document.createElement("link");

        fileref.setAttribute("rel", "stylesheet");
        fileref.setAttribute("type", "text/css");
        fileref.setAttribute("href", "css/ie_style.css");
  }
});

[TracySchloss]

Should I add an 'else' for the other browsers?  It seems like if I load one as

<link type="text/css" rel="stylesheet" href="css/style.css">

and then use the if statement, I'll end up with both loaded.  Maybe that's OK, if I only put the few changes I need for IE to look right.

For me, it doesn't seem to ever load the 2nd CSS when I'm in IE.  I only see styles from the first one I'm loading.  All I changed was the name of the stylesheet.  I added the console.log line, but it never fires in IE.

        if(has("ie")){ // only IE

        console.log("map being accessed in IE");

       var fileref= document.createElement("link");

        fileref.setAttribute("rel", "stylesheet");

        fileref.setAttribute("type", "text/css");

        fileref.setAttribute("href", "css/ie.css");

  }

Note:  I tried running this sample from dojo's documentation Browser (User Agent) Sniffing — The Dojo Toolkit - Reference Guide in my IE browser.  It came back saying it was Mozilla and that IE > 7 was No, even though it's IE 11.  It makes me wonder about this technique. 

[SteveCole]

I think there's one additional line that should be added to my JS snippit:

document.getElementsByTagName("head")[0].appendChild(fileref);

[TracySchloss]

Even without that line, it's never getting to it, because if (has('ie')) doesn't resolve as true. 

I have used has in the past, but it was an older version, when it was just dojo/sniff, not the new split out of dojo/has and "dojo/_base/sniff". It feels like IE doesn't like it. 

[SteveCole]

According to this site, conditional statements are no longer supported in IE 10 & 11 so that's out.

If the Dojo method isn't working right, your fallback is simple object detection. In effect, you find some property that you no IE does not support and you test whether or not anything was returned by the call. Something like this.

[TracySchloss]

Well I just got lost in that last link.  Maybe it was written with older IE version in mind, or maybe I didn't try it right. In my IE 11, I got the same output as I did in Chrome.

Oh well, I was so close!  I'm going to reread the documentation about making all new styles for an infoWindow.  Maybe there's something there that will strike a chord.  Unless that's now been deleted, in which case I'll be digging through my old downloaded copy.

[KellyHutchins]

Setting the title to null works to remove the title from the header in my testing.  Another option could be to set the titleInBody property of the popup to true. This property adds the title to the popup content instead of the title area.

Also if you want to avoid the header look try  using one of the built in themes available for the popup. There are two themes light and dark. Here's an example of how the light theme looks when the title is set to null.

Here's a jsbin that shows the code that produces the above info window:

JS Bin - Collaborative JavaScript Debugging

I've also attached the code file.

[TracySchloss]

I vaguely remembered a 'light' and 'dark' theme, but I couldn't remember any details and didn't see them where I was looking in the documentation    Where are they mentioned, the Popup API documentation?

[TracySchloss]

I'm pretty close to the look I want,  Because of the problem I had with the content of the infowWindow in IE displaying the information from the previously clicked feature, I ended up removing the infoTemplate parameter on my featureLayer.  The content of the window is set on the click event.  I assume this is because I'm also trying to include the attachment in the information tag.  I don't typically have any problems with featureLayers and infoTemplates. 

I put titeInBody in the definition of my Popup, but that didn't do what I expected, probably because I'm not using a PopupTemplate.

This is what I have.  The actionPane is hidden, and I'm not sure why.  I had a similar issue in a project that used bootstrap.  It seems like you should be able to remove the 'hidden' class from the actionsPane, but I'm not sure where that would go.

JS Bin - Collaborative JavaScript Debugging