Infobox background color html

[eber...@googlemail.com]

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

[rezn8d]

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

[Emmanuel Play or Die]

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);

[Emmanuel Play or Die]

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 = '<div style="height: 360px;">' + entity.properties.description

           + '</div>';

       }
    }
 }