3

My original application is not viewing correctly (in all browsers) in fullscreen mode, which is OpenLayers 3 functionality. The problem is with that map does not cover all of my screen and it still displays my header/sidebar/footer (but only with one color).

I have everyting positioned absolutely:

#map {
    position: absolute;
    top: 100px;
    right: 300px;
    bottom: 30px;
    left: 0px;
    opacity: 1;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
}

#header {
    position: absolute;
    top: 0px;
    right: 300px;
    left: 0px;
    height: 100px;
    margin: 0;
    background-color: white;
    opacity: 1;
} ... etc for sidebar, footer...

ONLY FIREFOX fullscreen mode displays everything correctly, Chrome and explorer are not OK.

Is this the question of CSS?

Is this the question of fullscreen javascript API in browsers?

Is this Openlayers fullscreen mode bug?

There is an example of original application in windowed mode.

Firefox - version 34.0

windowed

There is an example of fullscreen in Internet explorer.

Internet explorer - version 11.0.9600.17416

explorer fullscreen

and last is Google Chrome - Version 39.0.2171.71 m chrome fullscreen

closed as off-topic by PolyGeo Sep 3 at 7:30

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "This problem cannot or can no longer be reproduced. Changes to the system or to the asker's circumstances may have rendered the question obsolete, or the question does not include a procedure to enable potential answerers to reproduce the same symptoms. Such questions are off-topic as they are unlikely to help future readers, but editing them to include more details can lead to re-opening." – PolyGeo
If this question can be reworded to fit the rules in the help center, please edit the question.

  • what if you remove left, right and top coordinates from the #map? – Michal Zimmermann Dec 7 '14 at 14:31
  • It doesnt result in correct fullscreen. – dkocich Dec 7 '14 at 18:13
3

I am having the same issue in Google Chrome. Everything works correctly in Mozilla or IE. Here is my CSS definition of the div where the map is loading.

.map {
height: 35em;
width: 100%;
border-radius: 5px;
border: 0.2em solid #209CA6;
}

When I go full screen this happens: enter image description here

I realized that reason why this is happening is the fixed setting of the height of the div. The height is set to 35em. When I change the height to 100% like this:

.map {
height: 100%;
width: 100%;
border-radius: 5px;
border: 0.2em solid #209CA6;
}

It works just fine: enter image description here

However I wanted to keep my map the fixed height of 35em. In that case I used following code and it works perfectly:

.map:-webkit-full-screen {
   height: 100%;
 }
 .map:-moz-full-screen {
   height: 100%;
 }
 .map:-ms-fullscreen {
   height: 100%;
 }
 .map:fullscreen {
   height: 100%;
 }
1

Today I updated Firefox to version 35.0.1 and suddenly fullscreen functionality works again (IE + Chrome dont)! So as I suspected this error is related to version of every internet browser and javascript fullscreen api.

0

I got the same issue with Chrome, i solved wrapping the map in another div:

#map-home {  
  height:100%;
  width:100%;    
}
.map-wrap{    
  height:300px;
  width: 100%;        
}
<div class="map-wrap">
  <div id="mymap" class=""></div>
</div>

Now it works on FF and Chrome and Edge.

Not the answer you're looking for? Browse other questions tagged or ask your own question.