robodisco robodisco - 6 months ago 10
jQuery Question

How do you simply hide an element without it collapsing in jQuery

I have a table of todos and on the leftmost column are normally checkboxes to mark completed. I want to hide those checkboxes untill a user hovers over a task, upon which that tasks checkbox becomes visible.

Currently when I hide the checkboxes using

$('table#incompleted_tasks tr td input[type="checkbox"]').css('display', 'none');


the actual column collapses and following columns are shunted left. This means when i hover over a task the checkbox is expanded but everything is shunted right and thus misaligned.

Id like to preserver that hidden columns width but how?

Answer

Use

$('table#incompleted_tasks tr td input[type="checkbox"]').css('visibility', 'hidden');

The element will not be shown, but the place for it will be “held occupied” for in the page flow.