I have an angularjs app with Angular Material made with the yeoman fullstack generator. My index.html has a navbar and a ui-view to show the sites content.
<!-- index.html --!>
<!-- Add your 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 that I want to fill the window but it will not. The height is not always stagnate. There is also a direct route for the map.
Setting ui-view's height to 100% doesn't work and it is not exactly what I need any way. While the map should be at 100% there are other things that load in ui-view should not. Please help me get this map to fill the window.
The map.html loads the open layers directive found here. I tried to use flex from angular material with no success either. There is obviously a way to do thais I am just new and have added height and/or flex tags to just about everything I could find in the DOM with no success.
I have a full height openlayers map in a ui-view using angular material with a toolbar similar to what you need:
Be sure you have body and html set to 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 the ui-view have something like (or you can wrap your openlayers map into another element):
<openlayers style="position: absolute" width="100%" height="100%">
</openlayers>
The trick is to use position: absolute on the [flex] children.
EDIT
I forgot that the div with layout has to be full height as well.
jsfiddle: http://jsfiddle.net/kvetis/k3wm4tzp/3/