Cesium widget not resizing to properly filling page's empty space

CesiumJS
1

1. A concise explanation of the problem you're experiencing.

Hi,
I'm trying, for the first time, to integrate Cesium in a page where it's not the only page's widget.
I'm doing that in an MDB-based (Bootstrap Material Design free edition: https://mdbootstrap.com/) page.
I started with a very simple layout consisting in a top fixed basic navigation bar and the Cesium's Widget right below it, expecting it to automatically adapt its size to the free space so to filling it.
Unfortunately it doesn't resize properly to the free area, no matter what style I tried.
Without any style applied to the Cesium's container DIV it just overflows (no scrolling bars) the available free space (with other styles it underflows it when the page size is reduced).
If I replace the Cesium DIV with a plain background-colored DIV, or a centered text plain background-colored DIV everything works fine (as intended) in both cases.

What would it be the correct way to place the Cesium's Widget to accomplish my goal? Thanks

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.

I prepared a very simple example

https://mdbootstrap.com/snippets/jquery/vdg/730465

It consists in the most basic sample MDB's Navbar copied and pasted from https://mdbootstrap.com/docs/jquery/navigation/navbar/ (the Avatar orange Navbar example) followed by the 3 different scenarios depicted above:
1) plain background-colored DIV (WORKING)
2) centered text plain background-colored DIV (WORKING)
3) basic Cesium Widget (NOT WORKING)

To test each of them just comment out the others and uncomment it (optionally play with the browser's windows size too), thanks.
I attach screenshots of the mentioned scenarios.
Part of the Cesium's view (when Cesium is displayed) is always invisible.

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I'm trying to integrate Cesium in an application where it is not the only GUI element.

4. The Cesium version you're using, your operating system and browser.
Cesium 1.57, Windows 10 64bit, Google Chrome 74.0.3729.157 official build 64bit

MDBNavbar_Cesium.jpg
MDBNavbar_Cesium.jpg1919×983 163 KB

MDBNavbar_EmptyColoredDiv.jpg
MDBNavbar_EmptyColoredDiv.jpg1917×989 83.7 KB

MDBNavbar_CenteredTextColoredDiv.jpg
MDBNavbar_CenteredTextColoredDiv.jpg1913×985 93.3 KB

2

I don’t think this is a Cesium-specific issue. Your plain background div does overflow as well (you can see this with the element inspector). It’s just harder to see because it’s a solid color.

Try using Flexbox to solve this: https://css-tricks.com/boxes-fill-height-dont-squish/

Let me know how it goes.

3

Hi Omar,

thanks so much for examining this.

The example with plain centered text looks like working, but I’ll look into it in more depth (along with the other example you are showing me it overflows).

I will try to prepare a bare bones example without MDB and see how it goes with it and eventually put it in fiddle for further examination.

I already tried Flexbox, but unfortunately to no avail;I’ll follow your tip anyway, thanks.

I’ll let you know asap.

Best regards

Vittorio