Issue with Top Left Half of Cesium Viewer

CesiumJS
1

The top left half of the Cesium Viewer in my Google Site is stretched vertically like cheese on my favorite restaurant’s macaroni and cheese. The vertical stretching is a real problem for me. Please fix the Cesium viewer’s top left triangle. My Google Site needs to be peak.

3

Hi @CPTheCartographer, welcome!

I think this is a CSS/container sizing issue rather than a CesiumJS bug. When the container doesn’t have fixed dimensions, the canvas stretches to fill unevenly.

Could you share a few details so we can help track this down?

  1. How are you embedding CesiumJS? Are you using the “Embed URL” option in Google Sites or the “Embed code” option with custom HTML? Each handles sizing differently.
  2. A screenshot showing the stretching, so we can tell whether it’s a uniform scale issue or something else.
  3. The HTML of your embedded page (or the relevant parts), particularly the CSS for the container div and the <html>/<body> elements.

The usual fix is making sure your container and page fill the full available space:

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

If you’re using “Embed URL,” the iframe Google Sites creates sometimes doesn’t get a proper height. You may need to switch to “Embed code” so you can control the iframe dimensions directly.