Openlayers 3 resizing in flexbox layout?
Can't get map with 3 layers open to resize correctly in flexbox layout?
I have a very simple flexbox column with two rows and it seems that updating the size of open layers always calculates its height as the full page height, causing the vertical scrollbar to appear.
<style>
.container {
display: flex;
flex-direction: column;
}
.row {
flex: 1 1 auto;
}
#map {
flex: 0 0 none;
}
</style>
</head>
<body ng-controller="AppCtrl">
<div class="container">
<div class="row">NAV BAR</div>
<div id="map" class="map"></div>
</div>
...
An example can be found here http://codepen.io/cmadsen/full/zGpYjQ/
+3
source to share
1 answer
Try the following:
html, body {
margin: 0; /* Remove margins */
height: 100%; /* Fill the window */
}
.container {
height: 100%; /* Fill the window */
display: flex; /* Magic begins */
flex-direction: column;
}
#map {
min-height: 0; /* Let the content overflow */
flex: 1; /* Fill the available space */
}
var app = angular.module('StarterApp', []);
app.controller('AppCtrl', ['$scope', function($scope) {
var rasterLayer = new ol.layer.Tile({
source: new ol.source.TileJSON({
url: 'http://api.tiles.mapbox.com/v3/mapbox.geography-class.jsonp'
})
});
var map = new ol.Map({
layers: [rasterLayer],
target: document.getElementById('map'),
view: new ol.View({
center: ol.proj.transform([11, 55.8403], 'EPSG:4326', 'EPSG:3857'),
zoom: 6
}),
controls: ol.control.defaults().extend([
new ol.control.ScaleLine()
])
});
}]);
@import 'https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol.css';
html, body {
margin: 0;
height: 100%;
}
.container {
height: 100%;
display: flex;
flex-direction: column;
}
#map {
min-height: 0;
flex: 1;
}
<body ng-controller="AppCtrl" ng-app="StarterApp">
<div class="container">
<div class="row">NAV BAR</div>
<div id="map" class="map"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.6.0/ol-debug.js"></script>
</body>
+3
source to share