AnsweredAssumed Answered

CSS issues for legend and map button elements

Question asked by pdomja on Sep 4, 2014
Latest reply on Oct 10, 2014 by pdomja



I have two CSS issues on my page:

1. Positioning and styling the legend.

2. Styling the map controls.


I initially developed the page by merging several samples using the border container layout. The page does what I want, but when I tried to change the layout, which I thought would be the simple part, I encountered the issues mentioned above.


1. The legend


The legend div, which was previously in a border container, I would now like to position over the map. Despite a number of different attempts, including adding position information to the .esriLegendLayer and .esriLegendService to both an external and internal style sheet, I was able to alter the properties of the box but not move it.


2. Styling map controls


This is a smaller issue, but for some reason my map zoom controls and  geolocator box have lost the nice rounded edges, but I cant tell why. I am using the same style sheets and the same div names for the map and geolocator elements.



correctMapControl.JPG has gone to inCorrectMapControl.JPG


Can anyone give me any pointers on how to reference the legend and style it as I require.


I have attached my html page and the css.


Any pointers would be a great help, as I'm quite new to both the javascript api and css.


Kind regards,