Community
Select to view content in your preferred language

Popup Component Title Font Size

57
1
yesterday
ZorbaConlen1
by
Frequent Contributor
yesterday

Hi. For my app, I need control over popups such that some open and close on hover and others on click. Therefore, I have disabled default popup for the view and am creating new popup components like below. Note that I'm intentionally using the component as my understanding is that widgets will be retired soon:

//Create separate popup components
const hoverPopup = document.createElement("arcgis-popup");
hoverPopup.view = view; 
view.ui.add(hoverPopup);

This works nicely. The content is coming from the configured popup in my webmap. But there is one issue: For some reason, the popup title font is very small. This seems like a bug, but I was confident I could override the style and increase the font size for title portion. I'm finding that it's very difficult to do, however due to the style being defined in the shadow dom. Here's how it looks in my app:

ZorbaConlen1_0-1785961732376.png

Any advice on how to target that title font via css, or another approach?

On a side note, I'm seeing this with other components I have added as well, like panels, layer list, etc. Often the font sizes are very small.

Thanks

0 Kudos
1 Reply
ReneRubalcava
by Esri Frequent Contributor
Esri Frequent Contributor
yesterday

The popup component is only meant to be used in a map or scene component. If you add it to the view.ui, the css won't  target things correctly, as you can tell in your image, and some other odd stuff might happen too. Maybe you can use it like that, but not recommended.

If you want to have your own popup comp with your app, you can do it like this.

  <arcgis-map item-id="45725ba7d9fb47a0925398919b13d1fa" popup-disabled>
  </arcgis-map>
  <script type="module">
    const mapElement = document.querySelector("arcgis-map");
    const popupElement = document.createElement("arcgis-popup");
    popupElement.slot = "popup";
    mapElement.append(popupElement);
    
    mapElement.addEventListener("arcgisViewClick", async (event) => {
      const { results } = await mapElement.hitTest(event.detail);
      const features = [];
      for (let result of results) {
        // avoid basemap results, it's just empty
        if (result.layer.type === "feature") {
          features.push(result.graphic);
        }
      }
      
      popupElement.features = features;
      popupElement.location = event.detail.mapPoint;
      popupElement.open = true;
    });
  </script>

demo: https://codepen.io/odoe/pen/bNeYWRd?editors=1000

0 Kudos