nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Popup header can't be removed in arcgis javascript API 4.28

SoulaimaneBenmessaoud

I would like to remove the header of the popup, but it is not possible to achieve this by overriding the CSS class directly. This limitation arises because the header is wrapped within a shadow root, as implemented by the calcite components. I am using arcgis javascript API version 4.28.9

Finde mehr Beiträge mit dem Tag

Accepted answers

All comments

ViktorSafar

Does not seem to work, using @ArcGIS/core@next (which at this stage is v29)

ViktorSafar

I think I figured it out.

We had been making custom popups using 2 features of the built-in popup

popup’s content property to render custom content
hiding the header/actions bars by overriding the CSS

So when the header moved inside the shadow DOM, we got stuck.

After some experiments, it turned out the solution is actually quite simple

we do not use the Popup’s content property
we instead use the container property to render our custom popup
we hide the “entire” default popup by overriding the relevant CSS

import React from 'react'
import { createPortal } from 'react-dom';
import './App.css'
import MapView from '@arcgis/core/views/MapView';
import Map from '@arcgis/core/Map';
import Popup from "@arcgis/core/widgets/Popup.js";

/*
The important stuff

// if you do not do this, the popup will only stay in one (center top) anchor
// if you do this, the anchor will change out of the box as you move around the map
.esri-popup__main-container {  
  height: 0px;
  display: contents !important;
}

.esri-popup__main-container > .esri-widget--panel {
  display: none;
}

on your custom popup, z-index is required to ensure the popup renders over the popup-pointer

*/

const CustomPopup = (props) => {
  return (
    // z-index is required to ensure popup renders over the popup-pointer
    <div style={{ zIndex: 1, backgroundColor: 'white', padding: '20px' }}>
      This is my custom JSX Component popup
    </div>
  )
};

const PopupPortal = ({ mount, children }) => {
  return createPortal(children, mount);
};

const App = () => {

  const popupRoot = document.createElement("div");
  
  React.useEffect(() => {

    const mapView = new MapView({
      container: "mapDiv",
      map: new Map({
        basemap: "streets-navigation-vector"
      })
    });

    mapView.popup = new Popup({
      actions: [],
      container: popupRoot,
    });

    mapView.popupEnabled = false;
    mapView.on("click", (event) => {            
      mapView.openPopup({
        location: event.mapPoint
      });
    });

  }, [])

  return (    
      <div id="mapDiv">  
        <PopupPortal mount={popupRoot}>
          <CustomPopup />
        </PopupPortal>      
      </div>
  )
}

export default App

Justin_Greco

Looks like this might be coming in the February release of 4.29, I noticed this in the CHANGELOG for the next version "Added new VisibleElements to the Popup: actionBar, collapseButton, heading, spinner"

I tested this code on the next version and the popup header does not appear:

  const view = new MapView({
    map: webmap,
    container: "viewDiv",
    popup: {
      dockOptions: {
        buttonEnabled: false
      },
      visibleElements: {
        closeButton: false,
        collapseButton: false,
        heading: false,
        actionBar: false
      }
    }
  });

ViktorSafar

We have a project on 4.24 where the popup header is outside the shadow DOM while in 4.28 it is inside the shadow DOM.

It appears that an API to customize the popup header might be missing, similar to the API to customize the content.

ViktorSafar

There is no `panel.js` under `@arcgis/core/chunks`

v4.28.9

Justin_Greco

You can modify the style of the shadow DOM, but only after the popup is visible. The only problem is once its visible, the container hasn't loaded yet. I put in a 200ms timeout, but it flashes the header real quick, but it will be hidden for all the other times the popup opens.

reactiveUtils
  .whenOnce(() => view.popup?.visible)
  .then(() => {
    setTimeout(() => {
      view.popup.container
        .querySelector(".esri-features__content-feature")
        .shadowRoot.querySelector("calcite-panel")
        .shadowRoot.querySelector(".header").style.display = "none";
    }, 200);
  });

JoelBennett

In that case, you'll need to use ESM syntax:

import * as panel from "@arcgis/core/chunks/panel.js";

panel.P.prototype.renderHeaderNode = function() { return null; };

MatiasTonelli1

Hello everyone, I'm having the same problem, the footer also appears and this makes the popup look very bad and altered, but I never added it. This solution is not working for me, any alternative?

SoulaimaneBenmessaoud

Okay, I see, but I am currently using the @ArcGIS/core library. Even when I try to find the module, I get an error that it can't be found. I see that there is not a module named 'panel' inside the 'chunks' directory.

require(['@arcgis/chunks/panel'], function (panel) {
  panel.Panel.prototype.renderHeaderNode = function () {
    return null;
  };
});

JoelBennett

I don't think there's a documented way to do this. However, if the following executes prior to the creation of the Popup, it appears to achieve the desired results:

require(["esri/chunks/panel"], function(panel) {
    panel.Panel.prototype.renderHeaderNode = function() { return null; };
});

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.