Hi, I'm working with a script developed in ArcGIS 3.21 JavaScript API. When the PopUp is displayed as Info Template, the close button dissapear. I'm enclosing an image about this. The code is like this: var startExtent = new esri . geometry . Extent ( - 13363107 , 1593174 , - 9453107 , 3922536 , new esri . SpatialReference ( { wkid : 102100 } ) ) ; map . setExtent ( startExtent ) ; map . infoWindow . resize ( 400 , 325 ) ; var template = new esri . InfoTemplate ( ) ; template . setTitle ( "${ESTADO}/${ACUIFERO}/${NOM_POZO}" ) ; template . setContent ( getWindowContent ) ; var statesLayer = new FeatureLayer ( "https://-----------" , { mode : FeatureLayer . MODE_ONDEMAND , infoTemplate : template , outFields : [ "*" ] } ) ; What should I include in the script or what is missing? Thank you in advance and I hope someone could help me with this. Best regards. Francisco# 2019-01-23_15-59-27.jpg

Same problem. Adding this to my CSS fixed: .esriPopup .titleButton.close { display: block; }

Ok, nevertheless, thank you and we will check the css as you recommend it. One more thing: I've attached the js and the html files since you couldn't open the url above. Thank you again. Greetings! De: Robert Scheitlin, GISP Enviado el: jueves, 24 de enero de 2019 01:46 p.m. - Re: Close button dissapear in javascript (InfoWindow) GeoNet Re: Close button dissapear in javascript (InfoWindow) reply from Robert Scheitlin, GISP in ArcGIS API for JavaScript - View the full discussion conagua1330.zip

Sorry that url will not pull up for me.

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

Close button dissapear in javascript (InfoWindow)

FranciscoCastillo1

Hi,

I'm working with a script developed in ArcGIS 3.21 JavaScript API. When the PopUp is displayed as Info Template, the close button dissapear. I'm enclosing an image about this. The code is like this:

<SPAN class="keyword token">var</SPAN> startExtent <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">esri<SPAN class="punctuation token">.</SPAN>geometry<SPAN class="punctuation token">.</SPAN>Extent</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">13363107</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1593174</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="operator token">-</SPAN><SPAN class="number token">9453107</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">3922536</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">esri<SPAN class="punctuation token">.</SPAN>SpatialReference</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN> wkid<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">102100</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setExtent</SPAN><SPAN class="punctuation token">(</SPAN>startExtent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 map<SPAN class="punctuation token">.</SPAN>infoWindow<SPAN class="punctuation token">.</SPAN><SPAN class="token function">resize</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">400</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">325</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> template <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">esri<SPAN class="punctuation token">.</SPAN>InfoTemplate</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 template<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setTitle</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"${ESTADO}/${ACUIFERO}/${NOM_POZO}"</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 template<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setContent</SPAN><SPAN class="punctuation token">(</SPAN>getWindowContent<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="keyword token">var</SPAN> statesLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"https://-----------"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN>
 mode<SPAN class="punctuation token">:</SPAN> FeatureLayer<SPAN class="punctuation token">.</SPAN>MODE_ONDEMAND<SPAN class="punctuation token">,</SPAN>
 infoTemplate<SPAN class="punctuation token">:</SPAN> template<SPAN class="punctuation token">,</SPAN>
 outFields<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="string token">"*"</SPAN><SPAN class="punctuation token">]</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

What should I include in the script or what is missing?

Thank you in advance and I hope someone could help me with this.

Best regards.

Francisco#

2019-01-23_15-59-27.jpg

Find more posts tagged with

Accepted answers

All comments

FranciscoCastillo1

Thank you for the answer. We will checkt it out. However, I'm wonder if you could review our app and see the close button how displays when we apply de CDN framework. Maybe could help us to identify why happens that.

https://sigagis.conagua.gob.mx/rp/conagua1307.html

Sincerely,

Francisco

rscheitlin

Francisco,

Sounds like that main.css has a rule that is overriding the popup. The only way to know is to inspect the dom element and see the css rules that are being applied for the close button.

FranciscoCastillo1

Hi, Robert.

Yes, I'm using this:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/3.21/dijit/themes/claro/claro.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://js.arcgis.com/3.21/esri/css/esri.css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Besides, because of a formal rule here in my job, we need to attach a header/footer institutional that uses this:

<SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>link</SPAN> <SPAN class="attr-name token">href</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://framework-gb.cdn.gob.mx/assets/styles/main.css<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">rel</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>stylesheet<SPAN class="punctuation token">"</SPAN></SPAN> <SPAN class="attr-name token">type</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>text/css<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN>
 <SPAN class="language-javascript script token"><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"><</SPAN>script</SPAN> <SPAN class="attr-name token">src</SPAN><SPAN class="attr-value token"><SPAN class="punctuation token">=</SPAN><SPAN class="punctuation token">"</SPAN>https://framework-gb.cdn.gob.mx/gobmx.js<SPAN class="punctuation token">"</SPAN></SPAN><SPAN class="punctuation token">></SPAN></SPAN><SPAN class="token tag"><SPAN class="token tag"><SPAN class="punctuation token"></</SPAN>script</SPAN><SPAN class="punctuation token">></SPAN></SPAN></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Also a css file included in a local \styles folder:

<SPAN class="atrule token"><SPAN class="rule token">@charset</SPAN> <SPAN class="string token">"UTF-8"</SPAN><SPAN class="punctuation token">;</SPAN></SPAN>
<SPAN class="comment token">/* CSS Document */</SPAN>
<SPAN class="selector token">html, body, #map</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 100%<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">margin</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="selector token">.chart</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN>200px<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN>200px<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">padding</SPAN><SPAN class="punctuation token">:</SPAN>0px <SPAN class="important token">!important</SPAN><SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN>
 <SPAN class="selector token">#info</SPAN> <SPAN class="punctuation token">{</SPAN>
 <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 14.0625em<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">background-color</SPAN><SPAN class="punctuation token">:</SPAN> #000<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">color</SPAN><SPAN class="punctuation token">:</SPAN> #fff<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">position</SPAN><SPAN class="punctuation token">:</SPAN> absolute<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">left</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">bottom</SPAN><SPAN class="punctuation token">:</SPAN> 0<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">padding-left</SPAN><SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">padding-top</SPAN><SPAN class="punctuation token">:</SPAN> 10px<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">font-family</SPAN><SPAN class="punctuation token">:</SPAN> Arial, <SPAN class="string token">"Helvetica Neue"</SPAN>, Helvetica, sans-serif<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">border-top</SPAN><SPAN class="punctuation token">:</SPAN> 2px solid #ffffff<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">border-right</SPAN><SPAN class="punctuation token">:</SPAN> 2px solid #ffffff<SPAN class="punctuation token">;</SPAN>
 <SPAN class="property token">border-top-right-radius</SPAN><SPAN class="punctuation token">:</SPAN> 20px<SPAN class="punctuation token">;</SPAN>
 <SPAN class="punctuation token">}</SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

P.S. I realize when I turn on the CDN framework described above (

<SPAN class="operator token"><</SPAN>link href<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://framework-gb.cdn.gob.mx/assets/styles/main.css"</SPAN> rel<SPAN class="operator token">=</SPAN><SPAN class="string token">"stylesheet"</SPAN> type<SPAN class="operator token">=</SPAN><SPAN class="string token">"text/css"</SPAN><SPAN class="operator token">></SPAN>
 <SPAN class="operator token"><</SPAN>script src<SPAN class="operator token">=</SPAN><SPAN class="string token">"https://framework-gb.cdn.gob.mx/gobmx.js"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

), the close button dissapear. How come?

Thank's for your attention and have a good day.

Best regards!

rscheitlin

Francisco,

What css files are you including in your app?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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