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();
 }    

[RickeyFight]

Tracy,

Why don't you use css to hide the title?

[TracySchloss]

I guess what I really want is that I don't want it to look so much like a header, I just want to see the tools for close, maximize etc. Once you style it to white, then the tools don't show up.  Maybe I should find some other images that are black and swap out what's in the header.

[KenBuja]

One odd way to do it is to set the title with a No-break space using the Alt-0160 (type in 0160 on the keypad while holding down the Alt key). The curious thing was it didn't work in JSBin, but it works in the sandbox​ example or when I run it in something like Brackets on my machine

infoTemplate.setTitle(" ");

[TracySchloss]

That worked in Chrome.  I wonder sort of issues there might be in different browsers.

Now I have a header, but no title, but what about images for the tools in black, any suggestions?  It seems like there ought to be a inverse version of them somewhere.

[KenBuja · Accepted solution]

What's also worked is HTML formatting. I've tried <br> and & nbsp; (without the space...it doesn't show up here if I write it out)  in IE also. <br> puts a line break when you select more than one point, so the other would work better.

infoTemplate.setTitle("& nbsp;"); //take out the space after &

infoTemplate.setTitle("<br>"); gives you this

[TracySchloss]

I think I like that better than Alt-0160, since no one looking at the code would ever be able to tell that was there.

I found an inverse that works in Chrome on the tools.  Now I just need to make it happy in IE 11, which just ignored it.

.esriPopup .titleButton {

  -webkit-filter: invert(50%);

}

At first I tried just filter:invert, without the -webkit, but that didn't work.

I had forgotten that the content pane wasn't truly white, but slightly gray.  It was obvious once I set the header to white.

[SteveCole]

You won't get it working with Internet Explorer, at least not anytime soon:

Can I use?​

[TracySchloss]

Of course not, because it's IE.  There's always at least one point in my workday that I wish our default browser was something else!

I've not attempted to set a browser specific style before.  Can you do that?  Then I could have a darker background just for IE so the tools would show up.

[SteveCole]

Well, you can have a second copy of your CSS file, edited for IE's eccentricities,  and browser sniff at page load. If you detect IE, load the IE CSS stylesheet instead of your normal stylesheet.

I'm in the same boat- our shop is IE by default but they did roll out Chrome to everyone due to some IE vulnerability a while back.Every link opens in IE by default and I'm trying to find ways to circumvent that. One option is creating a shortcut that paths to Chrome's EXE and then append the URL for the app. I'm mulling over asking our IT department to add this shortcut to everyone's network profiles.

There's a second option which I haven't gotten to work yet: URI Schemes. Essentially this is like "file://<path>" or "ftp://<url>" but there's one for chrome named ChromeHTML. It exists but I can't get it to work, even with the suggestions in the previous link. That would be great because I need to add a link to my app on our organization's Sharepoint site. Oh well..