Infobox background color html

CesiumJS
1

I want to change the infobox background color with the html background tag. But it seems, that it does not work. Can someone confirm that?

Setting the background color with

.cesium-infoBox {
   background: rgba(255, 221, 0, 0.95);
    }

works fine. But my problem is, that I need different background color depending on the infobox content. So I would like to set the background color together with the html content of the infobox.

Thanks for your help!

Ruediger

2

The infoBox has an iframe in it.
The iframe css is controlled by /Widgets/InfoBox/InfoBoxDescription.css

To override iframe contents, you will either need to add lines to this css file or create your own infobox, which I am now trying to do. Until then, I simply added this to the bottom of the infoBoxDescription.css file:

.cesium-infoBox-description, body, html { color: #000000; background-color: #FFF; }

.cesium-infoBox-description * { max-width:100%; word-wrap: break-word; word-break: break-word; }

.cesium-infoBox-defaultTable-lighter tr, .cesium-infoBox-defaultTable-lighter td { max-width:100%; }

``

See our infoBox here, demo: http://climateviewer.net/

and here: https://github.com/rezn8d/climateviewer

Hope this helps,

Jim Lee

Climate Viewer 3D

I <3 Cesium

3

Was any progress made on this? I was trying to use some this example as a solution, but was unsuccessful:

        var cssLink = frameDocument.createElement("link");

        cssLink.href = buildModuleUrl('Path/To/Your/CSS/File.css');

        cssLink.rel = "stylesheet";

        cssLink.type = "text/css";

        viewer.infoBox.frame.contentDocument.head.appendChild(cssLink);
4

I’ve discovered a solution which applies to my app, where I am creating entities from a geojson dataset.

As I iterate over the entities created from my dataset, I am dynamically populating the description property and wrapping those values with a div which has style explicitly set.

var dataSource = Cesium.GeoJsonDataSource.load(’…/data/quartier2.json’).then(function(data) {
viewer.dataSources.add(data);
var entities = data.entities.values;
for (var i = 0; i < entities.length; i++)
var entity = entities[i];

if (entity.properties.hasOwnProperty(“description”)) {

entity.description = ‘

’ + entity.properties.description
  • ‘
’;

}
}
}

``