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.
oh yes, forgot about that part haha I guess that will do for now. Thanks for the tip
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>
I tried doing this myself, but the popup ignores my css commands
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
Thank you, will be looking out for more on this. For now I am forced to hack up a solution.
These look good, but will this still work for 4.2?
Look at this sample
Info Window Lite | ArcGIS API for JavaScript 3.19
or any of these
Samples | ArcGIS API for JavaScript 3.19
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
