CSS for Javascript popups - odd behaviour

3559
5
Jump to solution
08-31-2015 05:08 PM
BenScott1
Occasional Contributor

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).

New Picture (12).bmp

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

New Picture (9).bmp

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.:

New Picture (10).bmp

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

Tags (3)
0 Kudos
1 Solution

Accepted Solutions
KellyHutchins
Esri Frequent Contributor

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

View solution in original post

5 Replies
BenScott1
Occasional Contributor

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

Re: InfoWindow popup callout arrow is "broken"

0 Kudos
KellyHutchins
Esri Frequent Contributor

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 {

  1.    background: #F0F;

}

BenScott1
Occasional Contributor

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

0 Kudos
KellyHutchins
Esri Frequent Contributor

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

BenScott1
Occasional Contributor

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