Mapbox-gl-js: Fullscreen in Chrome keeps the height of the non-fullscreen map

[ezk84]

As it says in the title. On Firefox it works as expected.

mapbox-gl-js version: 0.45.0

browser: Chrome 66.0.3359.181 (Official Build) (64-bit)

Steps to Trigger Behavior

1. Open the demonstration below
2. Click the fullscreen button on top-right corner.
3. Observe height of map.

Link to Demonstration

https://codepen.io/ezk84/pen/XYdOgN

Expected Behavior

The fullscreen map should be as high as the screen is high (height: 100%)

Actual Behavior

The fullscreen map maintains the height set on the non-fullscreen version.

[ralphking]

You've set your containing div to 500px height, so thats all the max height the map will ever reach.

This works as expected: https://codepen.io/anon/pen/dKMEpZ

[jfirebaugh]

Thanks @ralphking. That's correct, you'll need to adjust the CSS.

[ezk84]

This isn’t what I would expect: you’re saying that the only way to have a map that when normal has a set non-100% height and is full-screenable is to have some extra code to modify the CSS when I press the fullscreen button. That to me sounds like the fullscreen button is defective.

I would at least expect some class on the map that would tell me when it is fullscreen so as to modify the height.

Somehow in Firefox it works as I expected though.

[ondrej-vesely]

Sorry for opening old thread, however the fullscreen feature should definitely override the div style.
Luckily, you can just use min-height instead of height.

https://codepen.io/anon/pen/LrKagG
Works as expected.