[OpenLayers-Users] Mouse Offset in Nested Divs

Thu Sep 3 15:53:19 EDT 2009

Chris,

Thanks for the info and link to the ticket.  I tried removing the
position:relative from #topbox (and the padding) and I'm still getting
the same issue.

One thing I did discover is if I remove the margin and padding from
body, and the padding from #topbox, the only offset I have is the border
width.  So I'm not sure if it's the position:relative; (in fact, the
only reason I have #topbox as position:relative is to let it serve as an
absolute reference point for mapdiv).

I'll continue to watch the ticket though.  Your comments definitely
pointed me in the right direction, and it's good to know there's
something to address the general issue.

Scott

Christopher Schmidt wrote:
> On Thu, Sep 03, 2009 at 12:49:51PM -0600, Scott Lewis wrote:
>> I am fairly new at OpenLayers, but am impressed with it's functionality.
>>  However, I am having a problem when it comes to nested divs with
>> OpenLayers.  I have some code to draw a rectangle on the map when the
>> user clicks and drags.  The rectangle draws fine, except it is offset
>> from the mouse cursor by a fairly significant amount.
>>
>> Here is a skeleton of my HTML structure:
>>
>> <body>
>> 	<div class="pageContentContainer">
>> 		<div id="topBox">
>> 			<div id="mapdiv" class="olMap"></div>
>> 		</div>
>> 	</div>
>> </body>
>>
>> And some CSS relevant to the page:
>>
>> body {
>> 	margin: auto;
>> 	padding: 10px 0;
>> 	top: -11px;
>> 	position: relative;
>> }
>> /* there is a page header at the top.  I didn't write this CSS */
>>
>> .pageContentHeader {
>> 	clear: both;
>> 	margin: 0;
>> 	padding: 0;
>> 	text-align: left;
>> }
>>
>> #topBox {
>> 	border: thin solid orange;
>> 	height: 420px;
>> 	padding: 10px;
>> 	position: relative;
>> 	width: 1230px;
>> }
> 
> 
> ^^ This is the proble. position:relative with a border messes up page
> position calculations, I beleive.
> Given the amount that this is off, it is completely possible that the
> padding is also an issue here.
> 
> http://trac.openlayers.org/ticket/2247
> 
> I don't know all the intracacies here, but position: relative is probably
> chief among the problems.
> 
> -- Chris
> 
>> #mapdiv {
>> 	border: thin solid red;
>> 	height: 400px;
>> 	position: absolute;
>> 	right: 10px;
>> 	width: 400px;
>> }
>>
>> and my setup code:
>>
>> function initOpenLayers() {
>> 	var mapExtent = new OpenLayers.Bounds(-3000000,-3000000,0,0);
>> 	var mapOptions = {
>> 			restrictedExtent: mapExtent,
>> 			projection: 'EPSG:3408',
>> 			maxExtent: mapExtent,
>> 			maxResolution: 'auto'
>> 	}
>> 	olMap = new OpenLayers.Map('mapdiv', mapOptions);
>> 	
>> 	var wmsLayer = new OpenLayers.Layer.WMS(
>> 			'NSIDC WMS',
>> 			'http://nsidc.org/cgi-bin/nsidc_ogc_north.pl',
>> 			{layers: 'blue_marble_07,north_pole_geographic'}
>> 	);
>> 	
>> 	var selectionLayer = new OpenLayers.Layer.Vector('Box Drawing Layer');
>> 	
>> 	olMap.addLayers([wmsLayer, selectionLayer]);
>> 	
>> 	var selBoxControl = new OpenLayers.Control();
>> 	OpenLayers.Util.extend(selBoxControl, {
>> 		draw: function() {
>> 			selectionHandler = new OpenLayers.Handler.RegularPolygon(
>> 					selBoxControl,
>> 					{'done': doneSelect},
>> 					{sides:4, irregular: true, persist: true}
>> 			);
>> 			
>> 			selectionHandler.activate();
>> 		}
>> 	});
>> 	
>> 	olMap.addControl(selBoxControl);
>> 	
>> 	olMap.setCenter(mapExtent, 0);
>> 	olMap.updateSize();
>> }
>>
>>
>>
>> When drawing, the cursor is about 10 pixels below and 30 or 40 pixels to
>> the left of the corner that is being dragged.
>>
>>
>> Does anyone know of any methods to counteract the offsets here?
>>
>>
>> Thanks!
>>
>> Scott Lewis
>> NSIDC
>> _______________________________________________
>> Users mailing list
>> Users at openlayers.org
>> http://openlayers.org/mailman/listinfo/users
> 