Iframe cuts off legend and axis labels

Dash Python
1

Hi!
I’ve achieved most of what I wanted with a little dashboard feature within another app. I worked on this dashboard app as an independent project first before integrating into the main application. This issue is not present in the independent version and only occurs in this Iframe in the other app. The Iframe method was convenient and I was looking for this sort of thing anyway. The main application was built in React, which I do not have enough knowledge of. This is a screenshot of the problem.

image
image1675×547 29.4 KB

The refresh button is outside the Iframe and just does this on click:

resetIframe() {
    this.setState({index: this.state.random + 1});
  }

and the Iframe component is simply:

<iframe key={this.state.index} src="http://127.0.0.1:5000/dash/" title="dashboardDiv" width="100%" height="90%"></iframe>

Yes, I’m aware of the localhost thing, the main app is supposed to be run locally so it’s fine. And I changed the height to 90% after I had to add the “Refresh” button to try to fix this truncation issue. Putting it 100% doesn’t change obviously besides it going off-screen because of the space occupied by the button.

Now, here’s the weird thing, once these charts appear with these cut-off legends and overlapping axis labels, if I press the refresh button which simply reloads the iframe, it fixes it for these charts that already exist.

image
image1670×504 28.8 KB

But for all future charts that get added, they will have this truncation issue and even pressing the button doesn’t fix it. BUT if I right-click the iframe and press “Reload Frame” (in Chrome), it always fixes the issue so I guess React reloads iframes differently?

So what I want to know is, is there some trick I can use to always make it not truncate even in the initial render and future renders as well? Because I do notice, it tries some resizing when I navigate to it the first time (but even before resizing, the legend/axes are truncated). Ideally, I don’t want this refresh button here at all.

Thank you in advance!

2

Okay, so after being stuck on this for 3 days, I finally figured it out. Of course I do thorough googling and searching before asking here and I had found this post before but couldn’t make sense of it as to how to apply it to my application. But he was correct all along.

The solution is, in fact, putting display: 'block', the question is just as to where. I tried a lot of things, even reloading from inside the Dash app, reloading from the React front-end, I put display:'block' in some places until I found the right one, which was

<Tab.Pane eventKey="dashboardTab" style={{display:'block'}}>
    <Dashboard />
</Tab.Pane>

since the app has React tabs. I had tried putting it in the CSS sheet before since I suspected this was the case, but nothing worked until I put this in the inline style. So yeah, this may be not be a generic solution but it may help you narrow down what the person in the aforementioned post was saying. So, big thanks to @jonkiky, I can finally rest easy.

3

Thanks for the info i will try to figure it out for more!