Cesium Full Screen makes entire page full screen, not cesium container

I currently have cesium in a div about half the size of my page, and when I click full screen it makes the background black, the whole html page goes full screen, and cesium stays the same size.

could this be related to this issue?

-----UPDATE--------

could it be related to my css styles?

#cesiumContainer {
    width: 100%;
    height: 720px;
    margin: 0; padding: 0;
    overflow: hidden;
}

.map-container {
    height: 720px;
    box-shadow: 4px 4px 7px #d2d2d2;
}

and then having ViewEncapsulation.None?

[devondanpearce]

Experienced this. Turned out I’d not set the fullscreenElement on the viewer to the ID of my container. If you don’t set this, it defaults to document.body which full screens the whole page (see https://cesium.com/docs/cesiumjs-ref-doc/Viewer.html).

[bampakoa]

@CHBaker can you try to alter the styles runtime, when clicking the fullscreen button? For example, if you set it as described in the README:

html, body, #cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

it should work