0

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.

sitrucj
  • 118
  • 13

1 Answers1

1

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/

kvetis
  • 6,682
  • 1
  • 28
  • 48
  • So, every child of ui-view set position to absolute? – sitrucj Jul 14 '15 at 15:18
  • I have not had success with this yet. Following your example I set everything when you set the position and the height on the openlayers tag the map disappears. – sitrucj Jul 14 '15 at 15:48
  • Frick I know I am close. The map needs position set on all ancestors then it doesn't disappear when you set the height but it will not fill the screen. – sitrucj Jul 14 '15 at 16:50
  • It appears on that column is not filling the screen and so the map just fills to where column ends? – sitrucj Jul 14 '15 at 17:20
  • I'll try to create a fiddle. – kvetis Jul 15 '15 at 08:43
  • 1
    Sorry it took me so long to respond. Here's a jsfiddle which demonstrates the answer: http://jsfiddle.net/kvetis/k3wm4tzp/3/ – kvetis Jul 15 '15 at 09:21
  • 1
    Oh no! I just saw this.. I am sorry. Thank you so much I will be digging into this shortly! – sitrucj Jul 31 '15 at 12:59