topic Re: Customizing the default popuptemplate window in ArcGIS JavaScript Maps SDK Questions

Customizing the default popuptemplate window

EvonFranklin — Tue, 24 Jan 2017 19:47:31 GMT

Is there a way to not just add my own content to a popup window but totally change the design completely? change the height of the popup etc. Or if not maybe there is a way to override showing the default popup and show a custom one instead?

Re: Customizing the default popuptemplate window

RickeyFight — Tue, 24 Jan 2017 20:15:48 GMT

Look at this sample

Info Window Lite | ArcGIS API for JavaScript 3.19

or any of these

Samples | ArcGIS API for JavaScript 3.19

Re: Customizing the default popuptemplate window

EvonFranklin — Tue, 24 Jan 2017 20:26:22 GMT

These look good, but will this still work for 4.2?

Re: Customizing the default popuptemplate window

RickeyFight — Tue, 24 Jan 2017 21:18:07 GMT

I was not able to find anything in the 4.2 Doc yet. I am sure it will be added in the future.

Re: Customizing the default popuptemplate window

EvonFranklin — Tue, 24 Jan 2017 21:31:20 GMT

Thank you, will be looking out for more on this. For now I am forced to hack up a solution.

Re: Customizing the default popuptemplate window

Drew — Sat, 11 Dec 2021 19:21:21 GMT

You could just override the CSS and style it the way you want.

Use your browsers development tools to inspect the HTML and see how it is styled.

SAMPLE

.esri-popup__header {
    position: relative;
    font-size: 12px;
    align-items: flex-start;
    justify-content: space-between;
    flex: 0 0 auto;
    background-color: #336ba2;
    color: #FFF;
}

Drew

Re: Customizing the default popuptemplate window

EvonFranklin — Wed, 25 Jan 2017 15:30:53 GMT

I tried doing this myself, but the popup ignores my css commands

Re: Customizing the default popuptemplate window

Drew — Sat, 11 Dec 2021 19:21:24 GMT

Add a !important on the end to force it.

.esri-popup__header {
    position: relative;
    font-size: 10px !important;
    align-items: flex-start;
    justify-content: space-between;
    flex: 0 0 auto;
    background-color: #336ba2 !important;
    color: #FFF !important;
}

Re: Customizing the default popuptemplate window

EvonFranklin — Wed, 25 Jan 2017 18:27:42 GMT

oh yes, forgot about that part haha I guess that will do for now. Thanks for the tip