I am trying to display three tabs, each with a unique graph in their content divs. When I load the page I cannot see the first graph. Although I can’t see the graph, the content div for that tab changes to the size of a plotly graph and my mouse changes when I hover over it. To make the plot show I have to switch to another tab and then back to tab A. If I’m on tab b and I resize the page, when I go back to tab A it doesn’t respond to the resize.
Removing that fade class from <div id="a"> makes the graph visible on load. To what CSS props is that class linked to?
Thanks! .fade comes from bootstrap I think, I don’t really need my tabs to fade in and out so that’s easy to remove. I think for the resizing I need to call the resize function each time I click on a tab. Otherwise my graph get squished to the left side.
Yes, that would be safer.
Apologies for replying to such an old thread.
I’m experiencing a very similar issue with my graphs getting squished to the left side. I’ve tried using Plotly.relayout() to “refresh” the graph when a tab is selected but it hasn’t helped.
What is the “resize” function you are referring to?
Redrawing the plotly graph making size to responsive whenever tab change. I have written function to generate Plotly graph.
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var target = $(e.target).attr("href") // activated tab
if(target=="#tab2")
{
//call the corresponding function which generates that plot
}
});
Hope this helps