How to edit css for infobox

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

@CSettle2021

Your project is coming along great! :smiley: 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.

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

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

@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

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

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.

2 Likes

@James_B

Thank you for the thoughtful response! :smiley:

-Sam

1 Like

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

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.

1 Like