How to edit css for infobox

[CSettle2021]

Hello,

So currently I have some czml boxes to display some properties. In these properties I also have images. When I first click on them the boxes appear with the image cut off like this:

Then, when you click out and click on it for a second time it appears as so:

Is there a way to format these boxes to fix this issue? I want them to show up like the second image all the time, including the first click.

Thanks,
Claire

[sam.rothstein]

@CSettle2021

Your project is coming along great! You are correct, our infoboxes are formatted using CSS. These threads discuss our best practices for overwriting the standard Cesium infobox CSS code. I suspect that they have the information that you need.

Best practice to overwrite CSS of cesium-toolbar, cesium-infobox, cesium-animation, cesium-timeline

For my custom app I would like to avoid the default look of Cesium and would like to use a flat design for cesium controls (especially animation clock and timeline). Would you suggest to build those controls from scratch and use the low level Cesium methods to implement the functionality or rather overwrite the CSS of the controls? It becomes tricky when adding additional controls, such as a start/ stop globe rotation button... how would you suggest to approach this?

How create completely new(custom) infobox and connect kml description

1. A concise explanation of the problem you're experiencing. Existing infobox has limit. e.g) design limit, javascript is not working in infobox bcs of security problem 2. A minimal code example. If you've found a bug, this helps us reproduce and repair it. No code 3. Context. Why do you need to do this? We might know a better way to accomplish your goal. I wanna create new custom infobox and kml description into custom infobox What code i have to use?? 4. The Cesium version you're using…

Quite frankly, my CSS skills are somewhat limited. However, I know that there are many guides on the internet that can help out with the CSS details. Maybe other community members have some suggestions or quick fixes?

-Sam

[CSettle2021]

Hi @sam.rothstein ,

Thank you for those sources. I am still unsure after reviewing that code how to fix my issue. I will check other sources as well. I am unsure why it just will not work with the first click. Anytime I click it after the first click, it comes up in the desired way and I am wondering if this is some glitch in my code and if it can truly be fixed using css.

Thanks,
Claire

[sam.rothstein]

@CSettle2021

My best guess is that the fix is CSS related. I suspect that there is some way to ensure that an infobox size is a certain number of pixels by using CSS. This would make it so that the image was not cut off by the infobox. Have you found the part of the code that sets the CSS for the infobox? I think this would be the first step. This is a tricky issue to debug, given that the behavior changes each time you click the billboard.

-Sam

[CSettle2021]

Yes. I have tried setting the infoBox to height: 100%. When doing this, I got the box to be the whole size of the page but the image was still stuck small. I tried editing the css to get the image to be height: 100%; which did not produce the results either. I am wondering what the inside area is classified. I also tried setting the description of the infoBox to Height: 100%;

Here is an example of what is happening: Cesium Sandcastle

Thanks,
Claire

[James_B]

The default infobox is great for a a quick and dirty out-of-the-box experience, but we wound up disabling it (infoBox: false option to the Viewer constructor) and making our own by hooking Viewer#selectedEntityChanged. If you’re otherwise happy with how the infobox works, you can try to fix this, but if you think you may wind up needing further customizations you might want to create your own panel now and save the headache.

One of the main reasons that we rolled our own info viewer was that the built-in one has sandboxing to allow safe viewing of untrusted content. For example, if you get your entity info from a WMS feature service or a public KML blob, the blurb might be HTML with script tags, which would open you up to an XSS attack if you just inject it directly into the page. That’s why Cesium uses a protected iframe. Unfortunately, that also makes it really hard to apply consistent styling, in my experience. If you’re creating all the info content yourself, you don’t need the iframe, which makes styling a heck of a lot simpler.

[sam.rothstein]

@James_B

Thank you for the thoughtful response!

-Sam

[CSettle2021]

Hi @James_B ,

Thank you! Do you know if there happens to be an example of this code to make your own infoBox?

Thanks,
Claire

[James_B]

I’m afraid the project I’m working on is private, but you can start by just attaching a pretty simple div to the Viewer’s container.

I put together a simple sandcastle example to show you what I’m talking about in very general terms. Click on a billboard to show a custom infobox – it’s just a simple div with a bit of added style. Of course adding nice transition animations and that sort of thing takes extra time, so you’d only want to go with this approach if you need the additional control over presentation.

ETA: The example is forked from the default “billboards” showcase. The important bit is at the beginning and end of the code – create and add the div, then hook the viewer’s selectedEntityChanged event.

[Adam_Sadiq]

Hey, is there anyway to specify the CSS code to include images in a Cesium infobox? I am trying to put a czml file together and display an infobox as follows, but the image won’t show.

CSS code below

[
{
“id”:“document”,
“name”:“Open Eye CZML Points”,
“version”:“1.0”
},
{
“id”:“tanzania-ilota”,
“name”:“Tanzania, Ilota”,
"description": “<div class=“cesium-infoBox-description-lighter” style=“overflow:auto;word-wrap:break-word;background-color:rgb(255,255,255);color:rgb(0,0,0);”><img\width=“50%”\style=“float:left; margin: 0 1em 1em 0;”\src=”./livyczmlimg/MbaliziHospital.jpg"/>\rs

<div>About Mbalizi Hospital

The Mbalizi Hospital is situated 20km east of Mbeya, one of the largest \ncities in Tanzania, in southwestern highlands. It was opened as a \nmission hospital from the Mbalizi Evangelistic Church (MEC) beginning of\n 2007 because the previous smaller hospital was always overcrowded. Due \nto denoted money from Switzerland and most of the work being done by own\n people a modern, well equipped hospital with initially 200 beds could \nbe established. At the end of 2007 the hospital became a \nDistrict-Designated Hospital (DDH) and is now running as collaboration \nbetween the Tanzania Evangelistic Church (TEC) and the Ministry of \nHealth and Social Welfare (MoHSW) of Tanzania.

Over the years the patient number has increased from less 100 inpatients\n up to 200 inpatients nowadays. So the bed capacity has been increased \nto 240 beds.

",
“position”:
{
“cartographicDegrees”:[33.262276, -8.896396,40]
},
“point”:
{
“color”: { “rgba”: [255, 255, 255, 200]},
“outlineColor”: { “rgba”: [24, 117, 202, 255]},
“heightReference”: “RELATIVE_TO_GROUND”,
“outlineWidth”:2.0,
“pixelSize”:10.0,
“show”:true,
}
}
]

[sam.rothstein]

Hi @Adam_Sadiq,

Thank you for reaching out with your question. To the best of my knowledge, this should be possible. I am not certain that it is necessary to modify the spec of the infoBox widget to get your desired functionality. One solution might be to simply update the html element of your infoBox with other necessary html elements.

Best,
Sam