Full window ui-view of openlayers map

Question

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.

kvetis · Accepted Answer · 2015-07-15 09:23:16Z

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/

edited Jul 15, 2015 at 9:23

answered Jul 14, 2015 at 13:53

kvetis

7,4202 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

sitrucj Over a year ago

So, every child of ui-view set position to absolute?

sitrucj Over a year ago

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 Over a year ago

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.

kvetis Over a year ago

Sorry it took me so long to respond. Here's a jsfiddle which demonstrates the answer: jsfiddle.net/kvetis/k3wm4tzp/3

sitrucj Over a year ago

Oh no! I just saw this.. I am sorry. Thank you so much I will be digging into this shortly!

|

Collectives™ on Stack Overflow

Full window ui-view of openlayers map

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related