Close button dissapear in javascript (InfoWindow)

609
7
01-23-2019 02:24 PM
FranciscoCastillo1
New Contributor III

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#

0 Kudos
7 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

Francisco,

   What css files are you including in your app?

0 Kudos
FranciscoCastillo1
New Contributor III

Hi, Robert.

Yes, I'm using this:

<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
 <link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">

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

<link href="https://framework-gb.cdn.gob.mx/assets/styles/main.css" rel="stylesheet" type="text/css">
 <script src="https://framework-gb.cdn.gob.mx/gobmx.js"></script>

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

@charset "UTF-8";
/* CSS Document */
html, body, #map {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 }
 .chart {
 width:200px;
 height:200px;
 padding:0px !important;
 }
 #info {
 width: 14.0625em;
 background-color: #000;
 color: #fff;
 position: absolute;
 left: 0;
 bottom: 0;
 padding-left: 10px;
 padding-top: 10px;
 font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
 border-top: 2px solid #ffffff;
 border-right: 2px solid #ffffff;
 border-top-right-radius: 20px;
 }

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

<link href="https://framework-gb.cdn.gob.mx/assets/styles/main.css" rel="stylesheet" type="text/css">
 <script src="https://framework-gb.cdn.gob.mx/gobmx.js"></script>

), the close button dissapear. How come?

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

Best regards!

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos
FranciscoCastillo1
New Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

Sorry that url will not pull up for me.

0 Kudos
FranciscoCastillo1
New Contributor III

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 <https://community.esri.com/?et=watches.email.thread>

Re: Close button dissapear in javascript (InfoWindow)

reply from Robert Scheitlin, GISP<https://community.esri.com/people/rscheitlin?et=watches.email.thread> in ArcGIS API for JavaScript - View the full discussion<https://community.esri.com/message/827186-re-close-button-dissapear-in-javascript-infowindow?commentID=827186&et=watches.email.thread#comment-827186>

0 Kudos
GregMcNamee
New Contributor III

Same problem.

Adding this to my CSS fixed: 

.esriPopup .titleButton.close {

      display: block;

}

Greg McNamee