How to fix size of a cell/container/row even after removing elements?

Hi everyone,

I am working on the following project:
http://evaristoc.github.io/viz_exer/endangered_amphibia/#

repo:

The project produce charts (d3.js) and there are transitions implemented between charts using jQuery:

fadeOut --> remove elements in chart --> update elements in chart with new chart --> fadeIn

So far so good, but every time the elements of the chart (#chart children) are removed and display is “none” the text underneath move to the top, before the div #chart is filled with new content, after which the lower text return to its correct position under #chart.

The undesired effect is a flicking due to lower text coming up every time the transition happens between figures. The problem is a CSS/HTML one, that should be solved with Bootstrap, but I don’t know how. The solution I have tried to implement is to fix the size of the div row that is parent of the div #chart, but I haven’t succeeded: html/css doesn’t respect the styled height even when !important. I have also tried to include the lower text in a row with no progress.

Any help?

EDIT: I found a partial solution, in this case inserting all elements in a table and fixing the size of the cells.
I would like to hear another solution using CSS/HTML? You would be able to see the resulting solution using the same link:
http://evaristoc.github.io/viz_exer/endangered_amphibia/#

OBS: In fact, I suspect that a cleaner solution could be finding ways to keep the svg and deleting its content using a d3.js-based method (exit-remove in d3.js parlance) instead, but that would have meant a revision of my code, something that I didn’t want to make now. Preferred an easier, quick solution. In another opportunity for sure…

I would fix the position of the text underneath absolutely so it doesn’t change based on the size of the chart at all.

Thanks, @PortableStick!
the problem I think I would have is that the chart is temporarily removed… that is the point when the flick occurs… can you let me an example?

Positioning that text below the chart absolutely will prevent it from moving. Something like:

div#textThingy {
    position: absolute;
    bottom: 5vh;
}

You’d have to play around with the numbers, and of course, I doubt you named your text container #textThingy, but that’s the idea. Then, no matter how big your chart is, it won’t shift around.

I will have a look. Thanks!