html - Full window ui-view of openlayers map -
i have angularjs app angular material made yeoman fullstack generator. index.html has navbar , ui-view show sites content.
<!-- index.html --!> <!-- add site or application content here --> <div ng-include="'components/navbar/navbar.html'"></div> <div ui-view></div> the main.html page loads: <div ng-include="'app/map/map.html'"></div> openlayers map want fill window not. height not stagnate. there direct route map.
setting ui-view's height 100% doesn't work , not need way. while map should @ 100% there other things load in ui-view should not. please me map fill window.
the map.html loads open layers directive found here. tried use flex angular material no success either. there way thais new , have added height and/or flex tags find in dom no success.
i have full height openlayers map in ui-view using angular material toolbar similar need:
be sure have body , html set height: 100%;
<div layout="column" style="height: 100%"> <div ng-include="'components/navbar/navbar.html'"></div> <ui-view flex style="position:relative;"></ui-view> </div> inside ui-view have (or can wrap openlayers map element):
<openlayers style="position: absolute" width="100%" height="100%"> </openlayers> the trick use position: absolute on [flex] children.
edit
i forgot div layout has full height well.
jsfiddle: http://jsfiddle.net/kvetis/k3wm4tzp/3/
Comments
Post a Comment