CODEWITHSUNDEEP
openlayers
MJVDM
MJVDM

Reputation: 3963

Cannot set map's div height for openlayers map

This code make the map's div width max but height to 0 (the % value doesn't matter, it's always 0)

<div id="map" style="width: 100%; height: 100%;"></div>

This works, as it sets the map's div to a fixed size, but is obviously not what I want.

<div id="map" style="width: 100%; height: 500px;"></div>

Has someone experienced this? Anyone a suggestion on how to fix this?

I'm also using jquery(-mobile)

Thanks

Upvotes: 7

Views: 23733

Answers (5)

Lars
Lars

Reputation: 2485

I ran into this topic because I wanted to set the map height in an ionic tab (ionicframework) to 100%. Even though this was not the original question maybe others run into this topic with the same issue. Additionally to the previous suggestions you have to set the height of the class .scroll to 100%:

html, body {
    width: 100%;
    height: 100%;
}

.scroll {
    height: 100%;
}

#map {
    height: 100%;
}

Upvotes: 1

James T Snell
James T Snell

Reputation: 1678

I've resolved this for my use-case by adding:

setInterval(function(){map.updateSize();}, 500);

Update: This is no loner what I do under OpenLayers 3. I did this while using OpenLayers 2. I'm not saying it's pretty, but it was good enough for what I needed.

Upvotes: -1

Glenn Plas
Glenn Plas

Reputation: 1638

in case you use jquery, this works perfectly to 'stretch' your map to the container div holding it, notmatter what your css has set for the map :

   $(window).resize(function () {
      //$('#log').append('<div>Handler for .resize() called.</div>');
         var canvasheight=$('#map').parent().css('height');
         var canvaswidth=$('#map').parent().css('width');

         $('#map').css("height", canvasheight);
         $('#map').css("width", canvaswidth);

   });

You would call this early btw, ideally in a $(document).ready(function(){ /* here */ } block.

Upvotes: 2

MJVDM
MJVDM

Reputation: 3963

This is my fix:

function fixContentHeight(){
    var viewHeight = $(window).height();
    var header = $("div[data-role='header']:visible:visible");
    var navbar = $("div[data-role='navbar']:visible:visible");
    var content = $("div[data-role='content']:visible:visible");
    var contentHeight = viewHeight - header.outerHeight() - navbar.outerHeight();
    content.height(contentHeight);
    map.updateSize();
}

Upvotes: 10

winsent
winsent

Reputation: 486

You need to give 100% height to HTML and Body:

html, body {
height: 100%;
}

Upvotes: 6

Related Questions