CODEWITHSUNDEEP
cssgoogle-chromefullscreenleaflet
Eli Kern
Eli Kern

Reputation: 319

Leaflet full screen conflicts with CSS position in Chrome

I can't seem to get the Leaflet full screen plugin to work appropriately in Google Chrome when I set the CSS position property for the map div.

Here's a JS Bin to demonstrate my problem.

See the code:

  #map { position:absolute; top:100px; bottom:50px; width:100%; }

On Firefox and IE, the map correctly goes to full screen (i.e. expands beyond the dimensions of the map div), but on Chrome, the full screen gets constrained by the top and bottom properties of the map div.

Any ideas on how to overcome this problem?

Thanks!

Eli

Edited 8/14/14: Thanks @FranceImage for the great answer, which worked like a charm. I'm still learning CSS and thus I'm sure there are always better ways to do things than I have done. For example, I'm not sure how to use the float property to achieve the same effect that I have with position: absolute on my page here.

How do I change the following code to use the float property instead of position: absolute to achieve the desired effect of having my map NOT overlap the header and sidebar? Thank you!

#map2 {
    height: 100%;
    width: 100%;
}
#mapcontain {
    position: absolute;
    top: 125px;
    bottom: 50px;
    left: 16%;
    right: 0;
    width: 100%;
}

Upvotes: 2

Views: 2529

Answers (1)

YaFred
YaFred

Reputation: 10008

For the plugin to work, you can't change the following

#map { position:absolute; top:0; bottom:0; width:100%; }

You will have to wrap the in a container (another div) where you will apply your positioning css

<div id="content">
  <div id="map"></div>
</div>

Note: I would not use absolute positioning for a page layout. Absolute position benefit is that the element is taken out of the normal flow and can cover other elements. It is usually used for dialog boxes and popups. Go for float position.

Upvotes: 2

Related Questions