Invalidate infoBox size to force re-size.

CesiumJS
1

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

When clicking on an entity, the infoBox opens with the associated description. Since my descriptions would be heavy to pre-load, I set the description to a spinner, and asynchronously load the new description.
When updating the description, the infoBox is not resized, making it difficult to read the contents. Closing it and opening it again does a resize (I don't re-load contents that have previously been loaded).
I'd like to trigger the resize event when updating the entity's description.

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

I'm not sure whether this is a bug or a call I'm not making, but I could not find answers to this question in the infoBox documentation.

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

User experience would be better with a size that's adapted to the contents.

4. The Cesium version you're using, your operating system and browser.

Cesium 1.46, macOS 10.13.5, Safari 11.1.1, Chrome 67.0.3396.99

2

How are you updating the description? The InfoBox should automatically recalculate the height whenever the value of the ‘description’ property of the viewmodel changes:

https://github.com/AnalyticalGraphicsInc/cesium/blob/f5e1a7d5b40810771cedf319a44c9aacf71043d5/Source/Widgets/InfoBox/InfoBox.js#L110

3

I'm doing like so. I have this helper function that'll fetch an entity from it's ID in my layers, and update the description at the end.

function updateDescriptionFor(entityId, description) {

    var entity;

    for (var i=0; i<viewer.dataSources.length; i++) {
      var dataSource = viewer.dataSources.get(i);
      if (dataSource.entities === undefined) {
        continue;
      }
      entity = dataSource.entities.getById(entityId);
      if (entity !== undefined) {
        break;
      }
    }

    if (entity === undefined) {
      console.error('trying to update description on a non-existing layer');
      return;
    }

    entity.description = description;
  }

4

Your code looks correct. The Viewer updates the description on the infoBoxViewModel inside its _onTick function here:

https://github.com/AnalyticalGraphicsInc/cesium/blob/4ddc4c679dd01a89a16579bcd6f0d79c84543fc4/Source/Widgets/Viewer/Viewer.js#L1626

You could try setting a breakpoint in this function and see if it’s being hit after you set the entity.description from your update function.

5

I can’t seem to recreate this behavior. Here’s a sandcastle example. If you click on the plane you should see a short description, and after 10 seconds it should update. When you run that, does it correctly update the height for the new text?

6

The sandcastle example works. I investigated a bit more, and it seems that the problem is related to pictures, which are not fully loaded in my case.

- With text content only, the infoBox resizes correctly.
- When the content is just an HTML <img /> tag, the box is very small, then the picture loads and the box does not resize.

I'll try computing the picture size and infer the values in the width and height tag attributes and see if this is helping set the proper inner size.

7

You could maybe pre-load the image elsewhere in the HTML and set the description when it has loaded with onLoad.

8

I haven't tried that but solved the problem by computing the picture size server-side and inferring the width and height attributes into the <img /> tag.
Thanks for your support!