Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

See below a screenshot of the infoWindow's appearance in my ArcGIS JavaScript API (v3.2) application.

default style

As you can see the transparent title bar with the white buttons doesn't work too well against a background map with white areas.

I've used Chrome's developer tools to test changing the CSS of every element associated with the infoWindow but still haven't managed to stop it having a transparent background. The closest I've come gave it a coloured background - by adding a background-color to the title class - but this extended way outside the infoWindow and out of the map.

altered title style

How do I style this differently? Do I need to choose a new (non-claro) theme for the whole page? What are the other theme options?

Any input much appreciated.

share|improve this question
    
You can pass the html table and style the rows and columns according to ur choice. –  Gunner Nov 15 '12 at 7:23
    
Have you looked through the CSS file to see what is set to transparent? serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/dijit/css/… –  Craig Nov 15 '12 at 14:38
    
@Craig Chrome's developer tools show me every CSS style that applies to the elements. Transparency didn't seem to be mentioned, and I couldn't see any references to images that might be transparent –  tomfumb Nov 15 '12 at 18:48

2 Answers 2

There's a blog post on this topic on the ArcGIS blog with specific directions on how to customize the look of a popup: Making Your Pop-up Pop!

share|improve this answer
up vote 1 down vote accepted

In the end my specific requirement - to remove transparency from the info window - was solved outside the ArcGIS JavaScript API.

The application's global CSS file defines a style for the class .title which includes float: left;

Because the info window uses the same class name I was getting some weird effects that were not related to API styling. The reason I couldn't find any mention of transparency in the CSS was because it wasn't a transparency setting making the area transparent, but instead an unwanted position offset that stopped it from being coloured.

I didn't want to change the global styling (or all titles in the site), and I wanted to avoid digging into the info window to change its title's class name, so I introduced the following JavaScript immediately after creating the map

var infoWindowTitle = query('.title', this.map.infoWindow.domNode)[0];
infoWindowTitle.style.float = 'none';
infoWindowTitle.style.styleFloat = 'none';  // IE
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.