When I create a CesiumWidget, it does not maximize itself to the container size. The following creates a <div> that is the size of the whole browser window, but the CesiumWidget canvas is always 300px wide and 150px tall. How can I get it to expand to the size of the container, like in the SandCastle demos - which work fine?
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
s<script type="text/javascript" src="Build/Cesium/Cesium.js"></script>
<script type="text/javascript">
function initCesium() {
var globe = new Cesium.CesiumWidget('cesiumContainer');
}
</script>
<title>Globe View</title>
</head>
<body onload="initCesium();">
<div id="cesiumContainer" class="fullSize"></div>
</body>
</html>
Where "fullSize" is:
.fullSize {
display: block;
position: absolute;
top: 0;
left: 0;
border: none;
width: 100%;
height: 100%;
overflow: hidden;
}
You’re still going to want to include the widget’s css file in your index.html file. It’s located in the “Cesium/Widgets/CesiumWidget/CesiumWidget.css”
Give that a go and let me know if that fixed your problem.
I included the CesiumWidget.css and tweaked the styling to match the SandCastle style tag and it works fine now. Thanks.
On a side note, we generally recommend people use the viewer and just disable to UI components that your application will not use.
One of the few exceptions to that recommendation is if your building a packaged app. The UI elements of Viewer use a library that will not work with the enhanced security settings.
Yeah, we started building our application back in March 2013 using Cesium b17, so all our Cesium startup code was “manual”, done by a small module I wrote that bore a striking resemblance to what is now the CesiumWidget class. I just switched us over to instantiate a Viewer instead with all the built-in UI widgets disabled. I ran into the same sizing issue, and did have to add some extra CSS to make the globe fill the window as I had it previously:
#globeContainer,
div.cesium-viewer,
div.cesium-viewer-cesiumWidgetContainer,
div.cesium-widget,
div.cesium-widget canvas{
width: 100%;
height: 100%;
}
div.cesium-viewer-bottom,
div.cesium-viewer-selectionIndicatorContainer,
div.cesium-viewer-toolbar {
display: none;
}
``
Other than that, though, the switch went pretty smoothly. Hopefully in the next day or two I’ll be able to write an adapter for our Backbone-based data model to let us leverage the Viewer’s Entity tracking abilities, which will be a nice added feature.
As always, props to the whole Cesium team for the fantastic toolkit and all the effort you’ve put in.
There is a Viewer.css file that has the necessary styles when using the viewer. It’s located in the “Cesium/Widgets/Viewer/” directory.
The reason they are separate is that The CesiumWidget.css file is a barebones stylesheet without any of the UI components included, whereas the viewer does.
