Customizing the default popuptemplate window

[EvonFranklin]

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?

[RickeyFight]

Look at this sample

Info Window Lite | ArcGIS API for JavaScript 3.19 

or any of these

Samples | ArcGIS API for JavaScript 3.19 

[EvonFranklin]

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

[RickeyFight · Accepted solution]

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

[EvonFranklin]

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

[Drew]

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

[EvonFranklin]

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

[Drew]

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;
}

[EvonFranklin]

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