Cesium Full Screen makes entire page full screen, not cesium container about angular-cesium HOT 14 CLOSED

@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

from angular-cesium.

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).

from angular-cesium.

maybe you can try making full screen button yourself and do:

onClick(){
const viewer = this.mapsManagerService.getMap().getCesiumViewer();
viewer.canvas.requestFullscreen() // for chrome do viewer.canvas.webkitRequestFulscreen()
}

from angular-cesium.

hm. okay, how could I opt for both? I'm not positive which browser a user will be on.

also, I'm getting the error

viewer.canvas.canvaswebkitRequestFullscreen is not a function

and a similar one for requestFullScreen().

I think I'll follow up on Cesium's page

from angular-cesium.

check out the prefix table in MDN FullscreenApi.
And do:

if (''webkitRequestFulscreen' in canvas) {
   canvas.webkitRequestFulscreen();
} else if ('requestFulscreen' in canvas) {
   canvas.requestFulscreen();
} // same for other browsers prefixes 

Not sure about the css values you showed, try changing it.
But requestFulscreen() API worked for me in a recent project I did .

from angular-cesium.

The code above seemed to work alright for me, it went into full screen. the problem is, it didn't widen the viewer, or display my menu or the built in cesium tool bar

//  onInit: this.viewer = this.viewersManager.getMap('main-map').getCesiumViewer();
fullscreen() {
        console.log('fullscreen....')
        const canvas = this.viewer.canvas
        if ('webkitRequestFullscreen' in canvas) {
            canvas.webkitRequestFullscreen();
        } else if ('requestFullScreen' in canvas) {
            canvas.requestFullScreen()
        }
    }

from angular-cesium.

you always can do requestFullScreen on the document :)

from angular-cesium.

you mean, my entire page? Wouldn't that just make my webpage full screen and the cesium viewer still partial?

from angular-cesium.

Try it out... Not sure if i understand your needs, if you only want to control cesium globe size you can change the camera zoom.

from angular-cesium.

So, to clarify, if you look at the screenshot above all the widgets disappear, and the actual cesium window is not that large, it is cut off by straight black. I'm trying to make cesium take up the whole screen and the widgets to show, like a normal full screen cesium feature.

from angular-cesium.

any more ideas? could you maybe send me a working example, where the Cesium window is inside a a bootstrap container like this:
<container><row><col>cesium</col></row></container>

from angular-cesium.

@CHBaker is this still an issue? I would love to help in that case 😃

from angular-cesium.

@bampakoa yes! it is still an issue, I haven't made any progress on it because I have switch projects for the time being, but I still haven't been able to make it work

from angular-cesium.

经历了这一点。原来，我没有将查看器上的fullscreenElement设置为容器的ID。如果未设置，则默认为document.body，它会全屏显示整个页面（请参阅https://cesium.com/docs/cesiumjs-ref-doc/Viewer.html）。
You're right,it has resolve my question,thank you!

from angular-cesium.