I am currently working on an angularjs app with Angular Material built using the yeoman fullstack generator. In my index.html file, I have a navbar and a ui-view that displays the site's content.
<!-- index.html --!>
<!-- Add your site or application content here -->
<div ng-include="'components/navbar/navbar.html'"></div>
<div ui-view></div>
When loading the main.html page, the
<div ng-include="'app/map/map.html'"></div>Adjusting the ui-view's height to 100% has not been successful and it does not meet the specific requirements. The map itself should take up 100% of the screen while other elements loaded in the ui-view should not. I am seeking assistance in getting this map to occupy the entire window.
The map.html file loads the open layers directive which can be found here. Additionally, I attempted using flex from angular material without success. It seems there must be a way to achieve this task, but despite my efforts to add height and/or flex tags to various DOM elements, I have not succeeded.