Select to view content in your preferred language

4.29 - Popup title disappears

226
4
4 weeks ago
n1kl4s
by
New Contributor

Hey,

since updating to ArcGIS 4.29 (I came from version 4.27 before), I've noticed that the titles of my action buttons in the popups disappear if the image area falls narrower than a specific value.

So far we have been able to counteract the responsive behavior with the following global CSS:

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

 

This no longer works with the new update, which is a pity, the title even disappears if only the standard zoom action button is there, although there would definitely be enough space to render the title.

Question: How can I reactivate the titles? (My screen will never be “too narrow” for my use case)

Additional info:
- I use Angular version 17 with the NPM package @ArcGIS/core@4.29.10
- I usually work with popup templates in feature layers

 

Thanks

 

Tags (3)
0 Kudos
4 Replies
Justin_Greco
Occasional Contributor II

Could you post a screenshot of what the popup looks like?  Do you have any other customizations in your popup CSS?  Popups were refactored at 4.28 to use Calcite.

0 Kudos
n1kl4s
by
New Contributor

Hey, sure! This is what the popup looks like when there is “enough space”, i.e. the screen width is above the calcite breakpoint (the goal is that it always looks like this):

n1kl4s_0-1717137071398.png

This is what it looks like when the screen is “too narrow”:

n1kl4s_3-1717137163144.png


In my eyes there is enough space, the chrome element inspection also shows that the popups are both 450px wide (as expected, you will see next).
Otherwise, the only other custom styling for the popups is the following:

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

.map {
  ::ng-deep {
    .esri-popup__main-container {
      width: 450px !important;
    }
  }
}


And I read in the changelog that the popups now use the calcite design, but I'm at a loss as to how to prevent the annoying disappearance of the ActionButton titles.

0 Kudos
Justin_Greco
Occasional Contributor II

It looks like the popup adjusts the display of the actions based on the width of the map view, not the width of the popup.  What is the requirement to have the popup be 450px all the time rather than adjust based on the width of the app? 

0 Kudos
Justin_Greco
Occasional Contributor II

The display of the labels for the action buttons is set by the expanded attribute of the calcite-action-bar.  So one thing you could try is setting that attribute when the popup is displayed and when the map view is resized like this.  

view.watch('popup.selectedFeature', () => expandActionBar());
view.on('resize', () => expandActionBar());
const expandActionBar = () => {
   let actionBar = document.querySelector('.esri-popup__main-container calcite-action-bar');
   if (actionBar) {
      actionBar.setAttribute("expanded", "");
   }
}

 

0 Kudos