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?
I was not able to find anything in the 4.2 Doc yet. I am sure it will be added in the future.
Look at this sample
Info Window Lite | ArcGIS API for JavaScript 3.19
or any of these
Samples | ArcGIS API for JavaScript 3.19
These look good, but will this still work for 4.2?
Thank you, will be looking out for more on this. For now I am forced to hack up a solution.
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
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit;">.esri-popup__header</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">{</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">position</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> relative<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">font-size</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> 12px<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">align-items</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> flex-start<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">justify-content</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> space-between<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">flex</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> 0 0 auto<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">background-color</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> #336ba2<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit;">color</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">:</SPAN> #FFF<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">;</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit;">}</SPAN>
Drew
I tried doing this myself, but the popup ignores my css commands
Add a !important on the end to force it.
<SPAN class="" style="color: #669900; border: 0px; font-weight: inherit; font-size: 14px;">.esri-popup__header</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">{</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit; font-size: 14px;">position</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">:</SPAN> relative<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit; font-size: 14px;">font-size</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">:</SPAN> 10px !important<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit; font-size: 14px;">align-items</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">:</SPAN> flex-start<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit; font-size: 14px;">justify-content</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">:</SPAN> space-between<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit; font-size: 14px;">flex</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">:</SPAN> 0 0 auto<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit; font-size: 14px;">background-color</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">:</SPAN> #336ba2 !important<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN> <SPAN class="" style="color: #990000; border: 0px; font-weight: inherit; font-size: 14px;">color</SPAN><SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">:</SPAN> #FFF !important<SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">;</SPAN> <SPAN class="" style="color: #999999; border: 0px; font-weight: inherit; font-size: 14px;">}</SPAN>
oh yes, forgot about that part haha I guess that will do for now. Thanks for the tip
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
