Search code examples
htmlcssopenlayersmaterializeopenlayers-3

Issue with showing OpenLayers map inside Materialize layout

I'm having problem with showing full map inside layout created using materialized framework. I'm having issues with footer area where I can't figure out how to remove white space in footer area. It looks something like this on wider screen.

enter image description here

On smaller screen it looks like this.

enter image description here

I tried with this:

.map {
 height: 100%;
 width:100%;
}

but without any luck.

Also, I'm wondering how to prioritize navbar and put it above map.

Here is jsfiddle with described problem. zhank you

Solution

  • A bit late answer but here it goes:

    I simply added flex 1 0 auto in for header, main and footer section

    header, main, footer {
    padding-left: 300px;
    flex: 1 0 auto;
}

    and for body section I added display: flex; attribute

    Like this: 

    body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

    Now map is scaling properly inside defined layout.

    enter image description here