AnsweredAssumed Answered

debug map object css styling

Question asked by dmarquardt on Jun 2, 2015
Latest reply on Jun 3, 2015 by dmarquardt



I have an app that runs in a small space - 400 x 500 px.  In order to do this, I'm having the map object cover the entire space, and all other elements sit on top of it (title, text and legend).  My legend is created outside of of the default map legend. When I change the map object styling - in this case position:relative - I loose the ability to have a click event on the map (in debugging, added a click event that works only when position is absolute).  If I keep it absolute (and the child elements position themselves according to the window instead of map), then I am able to click on map. 


I want to figure out what could be 'covering' the map object, making it unclickable. Or, find out if the map object just looses functionality when changing the position to relative.


Here's what the app looks like:




the map creation script looks like this: = new esri.Map("map", {

     extent : ext,

     showAttribution : false,

     logo : false,

     navigationMode : "classic"



The html looks like this:

<div id = "map">

     <div id = "TitleLayer">

          <span id = "title"> ERS ATLAS</span>


     <div id= "legend">

          <div id= "units" ></div>

          <table id = "legend" border = '1'>

                <tbody id = "tabBody1">




     <div class="note" > Click map to zoom <br>To pan, click and hold while moving pointer>





On the css side, the legend, title and notes all have a position of 'absolute' and the map object has a position of 'relative'

I'm guessing that some object, while map is in relative mode, is covering it up.  While debugging elements in the browser, it seems like these three children objects don't cover a larger space than what is shown in the illustration above. 


Anybody had a similar issue?  Any ideas on how to better debug this situation?




P.S., I'm using the js api 3.10.