topic Re: CSS for Javascript popups - odd behaviour in ArcGIS JavaScript Maps SDK Questions

CSS for Javascript popups - odd behaviour

BenScott1 — Tue, 01 Sep 2015 00:08:31 GMT

I am attempting to format a popup in a javscript map using the popup's css. I have copied the popup.png sprite locally and have modified the pointers.

Strangely, I have been able to successfully reference the bottom, bottom left, bottom right, left and right pointers, but the top, top left and top right pointers display a black box instead of the pointer (see below).

As an example of the ones that work - here is the bottom one:

The problem is not to do with the sprite or with the background position setting, because I can change the bottom pointer to reference the top pointer in the sprite.. and it displays fine i.e.:

If I set the background of the top pointer to transparent the black box goes away but still no arrow. I have played with the position settings and anything else I can think of but with no success. I am beginning to think this is a bug.

My css file and the sprite is attached.

Cheers,

Ben

Re: CSS for Javascript popups - odd behaviour

BenScott1 — Tue, 01 Sep 2015 04:32:40 GMT

This is related to this issue, which is also presently unanswered:

Re: InfoWindow popup callout arrow is &quot;broken&quot;

Re: CSS for Javascript popups - odd behaviour

KellyHutchins — Tue, 01 Sep 2015 16:19:10 GMT

Looks like you are using an older version of the popup (InfoWindow or InfoWindowLite). Those popups are trickier to style because you have to edit the sprite and correctly reference the popup arrow position in the sprite.

The newer popup is much easier to customize and if you want to modify things like the color of a popup arrow you can do so by setting the background color for the relevant css rule. If you take a look at this Popup sample you'll see that the popup appearance has been customized. If you wanted to change the arrow color you can use the following css. In this example we set the popup arrow to magenta.

.esriPopup.dark .pointer {

background: #F0F;

}

Re: CSS for Javascript popups - odd behaviour

BenScott1 — Tue, 01 Sep 2015 23:44:54 GMT

Thanks for your reply Kelly. I am getting caught between a number of issues here:

* My map service is symbolised on attribute values which are updated daily

* Adding the layers as feature layers, I have found that sometimes the old symbology is cached in the browser, meaning that the symbology displays incorrectly

* Disableclientcaching fixes this problem, but it is only available for dynamic map service layers

* Using infowindows, it is possible to set info templates for individual layers in the service using dynamicMapServiceLayer.setInfoTemplates

* A similar method does not seem to be available for popup tempaltes - i.e. setPopupTemplates

So I seem to be stuck with infotemplates for the moment, but they have this bug with the top pointers not displaying. So where would you advise I go on this? My javascript file is attached.

Cheers,

Ben

Re: CSS for Javascript popups - odd behaviour

KellyHutchins — Tue, 01 Sep 2015 23:50:25 GMT

Popups can work with either a PopupTemplate or an InfoTemplate so they'll work just fine with setInfoTemplate. Here's a sample that shows this:

ArcGIS API for JavaScript Sandbox

But looking at your code it looks like you are already using a popup so I'm confused about where the sprite and popup arrows are causing an issue.

Here's a jsbin showing a version of the above sample with the pointer modified:

JS Bin - Collaborative JavaScript Debugging

Re: CSS for Javascript popups - odd behaviour

BenScott1 — Wed, 02 Sep 2015 00:12:49 GMT

Thats great - thanks. I removed the reference to popup.png in my css and replaced it with the following:

.esriPopup .pointer, .esriPopup .outerPointer, .esriPopup .pointer.top {

box-shadow: 0px 0px 0px 3px #000000;

-moz-box-shadow: 0px 0px 0px 3px #000000;

-webkit-box-shadow: 0px 0px 0px 3px #000000;

-o-box-shadow: 0px 0px 0px 3px #000000;

background:white;

}

This does the job nicely.

Cheers,

Ben