Floating panel with dynamic size based on content?

Hi guys,

how would I setup visual element to be a container that resizes based on content?

For purpose of a runtime dynamic tooltip / floating panel system, I have setup a generic UI Document to be a panel container. (blue rectangle in attached PNG)

Next, in runtime, I add panel contents to the container. (green rectangle in PNG)

Works great, however I can’t seem to find a way of setting up the container (blue) so that it resizes to the content (green). In this particular case - to shrink it down.

Can it be done in UI Builder? Or should I change the size in code when assigning the content?

Thanks for any tips!

6954677--818519--container.PNG

Try setting position - absolute to your blue container. It should resize to its content.
Use style.top style.left to position your panel anywhere on screen.

1 Like

Great! Thanks for a quick response. It works!

Also, let me fish for a possible solution to another problem - I have set picking mode to Ignore on the container and also at all of the elements of the content document, yet the panels are still interfering with my pointer. Meaning that if the panel displays bellow the pointer it flickers as it alternates between on/off state. Meaning that OnPointerEnter triggers the panel visibility, the panel then appears under the pointer, which triggers the OnPointerExit and panel disappears, loop.

I know that if I position the tooltip outside of mouse, it wont interfere, but it just bugs me that this is the case and I would like to have it clean.

It’s hard to say, it depends on how you’ve set up your scene. First thing I would check if indeed your blue container get mouse events.

1 Like