I have, among other things, two divs in my map popup windows. Both get populated from a custom function (in template.php), and one div is floated right (to make two columns). As a result, I now have a vertical scrollbar appearing in the popup window (because of the 'overflow: auto' style).

Is there any way to stop this happening?
I've tried wrapping all the content of the window in a div with class="clear-block", and even setting a span at the bottom of the window with CSS: clear: both;.

Any ideas?

Comments

tmcw’s picture

tmcw commented
Status: Active » Closed (won't fix)

I'd recommend filing a ticket on the queue for the OpenLayers javascript library or asking this on the IRC channel there - this is a problem with the javascript, not the module.

I'm not sure what your intent is, but if it is to remove overflow-auto from the surrounding element, your best bet to do that is with the theme layer and aggressive CSS - use Firebug to find the surrounding elements and I think that the popup element is div.olPopupContent

Anonymous’s picture

Anonymous (not verified) commented
Status: Closed (won't fix) » Fixed

crschmidt from #OpenLayers on IRC helped point me in the right direction. I removed the surrounding 'clear-block' div and changed the clearing span to a div, and it works - no scrollbar!
Marking as fixed for the benefit of anyone with similar problems that comes across this...

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

nocean’s picture

nocean commented
Component: OpenLayers Behaviors » OpenLayers API

Not to dig up an old thread, but I stumbled upon this when looking for a solution to the same problem and BWPanda's description, while leading me down the right path, wasn't comprehensive enough to get me all the way there by itself.

So, if anyone else runs into this problem -- under your floated elements place a clear:both div, and then wrap the whole thing in another superfluous container div. What I think is happening, is that the JS is calculating the popup's height based on the parent div's height -- this just makes sure it calculates correctly.

An Example:

<div>
<img src="someimage.jpg" style="float:right;" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in lobortis nisl. Duis tincidunt molestie tellus, a molestie felis suscipit pulvinar. Vivamus non arcu diam, vitae condimentum purus.
<div style="clear:both;"></div>
</div>

Hope that helps, and thanks BWPanda.

DBD