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