1

In a twitter bootstrap page, I have a 12 wide column inside a row. Above the 12 wide column is the navbar. In the column is an open layers map and I need that column to take up the entire vertical space that remains under the navbar. This does not work. the map div shows up with 0px height. The only work around I found online is to add a width of 100% on html, body and the map div. that makes the map div span the entire document not just the column it is in. Thanks for any helpful pointers.

bootstrap version : 3.0.3 ol version: 2.13.1

This does not help http://openlayers.org/dev/examples/bootstrap.html

<!DOCTYPE html>
<html lang="en" class="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<title>Fixed Top Navbar Example for Bootstrap</title>

<!-- Bootstrap core CSS -->
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

</head>

<body class="">

<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
    <a class="navbar-brand" href="#">Nav</a>
</div>
</nav>


<div style="padding: 0 15px">
<div class="row" style="">
    <div class="col col-md-12">
        <div id="mapDiv"></div>
    </div>

</div>
</div>
<!-- /container -->

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="/js/OpenLayers/OpenLayers.debug.js"></script>
<script src="/js/jquery-1.10.2.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/view/home/presenter.js"></script>
<script>
(function () {
        console || console.log(mapDiv);
        var osm = new OpenLayers.Layer.OSM();

        var map = new OpenLayers.Map({
            div: "mapDiv",
            layers:[osm]
        });


        map.zoomToMaxExtent();
  })();
</script>
</body>
</html>
doles
  • 558
  • 6
  • 20
  • 1
    Here's a working example: http://bootply.com/99650 Make sure you set a pixel hieght on the div that contains the map. – Carol Skelly Dec 10 '13 at 15:33
  • I can't set pixel height because I want it to take up the the entire vertical space. – doles Dec 10 '13 at 21:41

1 Answers1

0

The example you refer to use Bootstrap version 2.2.1. your are using Bootstrap 3.0.3. There are many changes between version 2 and 3 of Twitter's Bootstrap, see also: Updating Bootstrap to version 3 - what do I have to do?

In your case start reading: http://getbootstrap.com/getting-started/#third-parties

The Openlayers' javascript add a class olMap to <div id="mapDiv"></div> use CSS to set it's height / width, like:

div.olMap
{
  cursor: default;
  height: 500px;
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  z-index: 0;
}

NB your html for the row and column looks strange, try:

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div id="mapDiv"></div>
    </div>
  </div>
</div>
Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • thank you. I cannot set specific pixel height because I want the map to take up all the vertical space that remains. Thank you again. – doles Dec 10 '13 at 21:49
  • use jquery to calculate the available height and set css's height according it? – Bass Jobsen Dec 10 '13 at 22:32
  • I could do that. How will it work when screen is resized? I dont want the scroll bar to ever appear! Thanks! – doles Dec 11 '13 at 02:24
  • maybe try this: http://www.brettsharp.net/2012/12/getting-maximum-height-for-div-with.html and use http://api.jquery.com/resize/ to recalculate – Bass Jobsen Dec 11 '13 at 08:29