Reputation: 3730
I have a page on which I use bootstrap and I added a map (API v3).
It works fine at first, but when I collapse the map - I can't reopen it.
I've looked through similar SO questions, but couldn't find one addressing this.
My HTML:
<div id="mapHeader" data-toggle="collapse" data-target="#map">
Header
</div>
<div id="map" class="collapse in">
<div id="map_canvas"></div>
</div>
CSS:
#map_canvas { height: 100% }
#map {height: 30em; width: 50%;max-height:100%;}
Javascript only loads the map.
Seems related, but I couldn't implement the same solution
Upvotes: 2
Views: 1408
Reputation: 75409
The problem is that the bootstrap collapse plugin is not registering a dimension for your map canvas so it doesn't know what height to expand it to. To fix this, add some dimensions to your #map_canvas
like so:
#map_canvas { height: 30em; width: 100%; }
Edit: As OP commented below, an specific height is required on the #map_canvas
container to allow the proper expansion of the collapsible container.
Upvotes: 5