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

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

#1

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…


#2

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


#3

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?


#4

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.


#5

I will have a look. Thanks!