Legend cut off when plot wrapped in details html tag

I typically output my plotly plots to html files which I embed in my site’s posts using an iframe. This is what the code and plot typically look like:

image

This method always works for me. Notice that the legend is clearly visible. But I recently tried to embed some of these iframes within a details HTML tag to hide the plots until the user clicks to expand the section. The code and output look like this:

image

Notice that now the plot legends are cut off. What’s strange is none of the actual plot is cut off, only the legends. To that end, using the details HTML tag works perfectly fine for plots without legends like these:

I know nothing about plotly.js but it’s the only place I could think to post this issue since generating the plot is not the problem.

Got the same problem.

I put 2 htmls in the same page, but they are in different tabs. the second (not active) seems to have a problem in the legend.

any help?

This is due to div’s display:none will set div height and weight to be 0.

I assume you put plotly iframe into a div which has a style using display:none. The style display:none will hide the div, also the it will set div’s height and weight to be 0.

When you load your site, the iframe will automatic load into this hidden div which its height and weight are 0. This casue the legend cut off issue.

To solve this issue, you can use css visibility or load iframe after hidden div shows up.

I have the exact same issue, ive set the frameborder to be 0, however never specified display:none. I’m unsure how to implement your solution. When would I want to load the iframe and how would I intend on specifying when it loads? If nothing is hidden I’m confused why I’d need CSS visibility