Custom popup action titles disappear

[JayHill]

When I load more than 2 popup actions into the popup the titles of each disappear including the default zoom to buttons title.  Has anyone else seen this happen?

[RobertScheitlin__GISP]

Jay can you share some of you code? I have added a half dozen actions with no issue.

[JayHill]

Of course

        watchUtils.when(app.view.popup, "selectedFeature", function photos(evt) {
          var x = document.getElementById("attInventory");

            x.style.display = "none";


            query("#panelInfo").removeClass("in");
            query("#panelDetails").removeClass("in");
            query("#panelInventory").removeClass("in");
            console.log(app.view.popup.actions);
            app.view.popup.actions.splice(1, 2);
            app.view.popup.actions.push(wellInventory);

            objectID = app.view.popup.selectedFeature.attributes.OBJECTID;
            //query the well layer
            var queryTask = new QueryTask({
                url: "https://services.arcgis.com/FeatureServer/0"
            });
            //query the well layers related table for photos
            relationQuery = new RelationshipQuery({
                objectIds: [objectID],
                outFields: ["Filename", "directory", "TYPE", "Usage", "Top_Depth", "Bottom_Depth"],
                returnGeometry: true,
                relationshipId: 1
            });

            queryTask.executeRelationshipQuery(relationQuery).then(function(rslts) {

                document.getElementById("attDetails").innerHTML = "";
                var features = rslts[objectID].features;

                if (features) {
                    app.view.popup.actions.push(corePhotos);
                } else {
                    query("#panelDetails").removeClass("in");
                    query("#collapseDetails").removeClass("in");
                }

                features.forEach(function(ftr) {
                    var t = ftr.attributes;
                    //console.log(t);
                    var string = t.directory + t.Filename;
                    var name = t.Filename;
                    var type = t.TYPE;
                    var display = t.Usage;
                    var tDepth = t.Top_Depth;
                    var bDepth = t.Bottom_Depth;
                    //console.log(string);
                    if (display == "PUBLIC" && name.match(/.jpg/)) {
                        document.getElementById("attDetails").innerHTML += "<li><img data-original='https://core_photos/" + string + "' src='https://core_photos/" + string + "' width='200' height='125' alt='" + type + " Top Depth: " + tDepth + " Bottom Depth: " + bDepth + "'></li>";
                    }
                });
            });
            });‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Jay,

  where is the code for wellInventory and corePhotos?

[JayHill]

        // Defines an action to open photos from the selected feature
        var wellInventory = {
          title: "Inventory",
          id: "well-inventory",
          className: "esri-icon-table"
        };

        // Defines an action to open photos from the selected feature
        var corePhotos = {
            title: "Photos",
            id: "photo-gallery",
            className: "esri-icon-media"
        };‍‍‍‍‍‍‍‍‍‍‍‍‍

[RobertScheitlin__GISP]

Jay,

   Sorry, It took me a minute to remember that this is behavior I have seen in 4.x API the the action count is greater than 1 then the title is removed. You can fix this using this css rule.

.esri-view-width-less-than-large .esri-popup__action-text {
  display: block !important;
}‍‍‍

[DamasoAvalos_Ruiz1]

Hello,

I have this problem too. I need to add three buttons or hyperlinks as action.
The problem is that I need to show text, not icons.
For some reason, this solution doesn't work in my code;
.esri-view-width-less-than-large .esri-popup__action-text {
display: block !important;
}

any idea, please?

I am using arcgis javascript 4.8

[RobertScheitlin__GISP]

Damaso,

  Just add this right after the view is created:

view.popup._displayActionTextLimit = 3;

[DamasoAvalos_Ruiz1]

This works perfectly!!!!

After I posted my comment I found a workaround with CSS, but yours is cleanest and straightforward.

thank you a lot.

[MichailMarinakis1]

Hi, 

I have the same issue with 4.11 version and none of the proposed solutions worked. Is there any workaround for the latest javascript version? 

Thank you in advance.