Width of Visualization in form card

[n-srinidhi]

Hi, I'm using ui.visualization() to plot graphs in a form card. When I don't specify a width, the visualization is barely visible as shown below

When I set the width, its visible as required. Since the default width is 100%, shouldn't it be visible?
Currently I have a ui.visualization() and a ui.expander within the form card. But the issue persists even if I create aa form_card with only the visualization.

[mturoci]

Hey, can you add a min repro code?

[n-srinidhi]

@mturoci Hi, Any luck with this? This seems to be a bug with the visible property, because when I recreate the item it works fine. Only when I have stated visible=False while creating the form card, and toggle the visibility property the width becomes too small as shown in the picture above.

[mturoci]

Thanks for pinging me, I missed your prev comment. If you have a single element in ui.inline, then it's redundant, and removing it should fix your problem. The default 100% width does not apply to items in ui.inline, because we probably don't want to have 2 elements next to each other both taking up 100% - totaling 200% width.

The rule of thumb then is that if you use ui.inline you should specify widths as needed.

[n-srinidhi]

Hi! I'm getting this even for visualization without ui.inline(). So, If I have initially set the visible property to False, and the toggle it as True, This behavior is present. If its visible while initialization, and is toggles later it works as expected.

[mturoci]

Yes, correct. The ui.visualization plot tries to render so that it fills the entire parent container if it doesn't have dimensions specified. Since you initially start with visible=False, the container has no dimensions (0), so plot is not rendered (or very small). I advise rendering plots visible and when needed rather than initially unvisible.

[n-srinidhi]

Understood! Thanks a lot.