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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

Rendering JButton to get the JCheckBox behavior in a JTable by using images does not update my table -