Closed RoccoLoxPrograms closed 3 years ago
Screenshot of the bad behavior from TLM:
I wonder if this may be related to the loading spinner, which has some particular positioning on it. The pictured graph looks like it may be the same size as the "please wait" div:
<div id="stats-loading-container" style="/*! display: none; */">
<div id="forum-post-stats-loading" class="spinner-loader"></div>
<div>Please wait warmly, graph is rendering.</div>
</div>
This is a good hypothesis but I don't believe it is correct. Note that all the class names below are from my memory, I'm on mobile right now. The height of the section that scrolls around (.pagecontentparent
) is actually the height of .mainbodytop
+ the height from the border added to .mainbody
. .mainbodyinner
has no height except for its padding for some reason, because the graph inside is position: absolute;
.
Edit; also since display: none;
is added to that element, it reserves no space. I'm going to have to assume it's plotly's responsive resizing is interacting poorly with the things I do to make the page layout function the way I want it to.
Unrelated, but "please wait warmly" is an... interesting turn of phrase. I don't think I've ever heard that "in the wild", so to speak.
The issue here is that
.js-plotly-plot .plotly .main-svg
isposition: absolute;
and one of its parent containers (which isoverflow: auto;
doesn't care about its size and creates a scrollbar, thereby hiding the plot.I haven't pinpointed what exactly the extension does that causes this to not work- it's nearly midnight and I'm exhausted- if someone else would like to take a peek with inspect element, that would be appreciated :)
I'll add that both of the main svg's need to be
position: absolute;
for the layering on the graph to work properly, making one or both relatively-positioned is not a fix.