Question

On this page, if you click the unsubscribe button on the first row (Madonna), the rows beneath slide up reasonably nicely. But if you then delete the new first row (Radiohead), the image on the remaining row (U2) jumps unpleasantly to the left after the row moves into position. The function that’s called to perform the table row deletion is:

SF.deleteRow = function(selector) {
    $(selector)
        .children('td, th')
        .animate({ paddingTop: 0, paddingBottom: 0 })
        .wrapInner('<div />')
        .children()
        .slideUp('slow', function() {
            $(this).closest('tr').remove();
        });
};

If I remove all the padding in the table cells, this problem disappears, but then I have no padding…..

Is there any way to fix this problem? Alternatively, is there another effect I can apply when deleting a table row that avoids this problem (I don’t want the row to just disappear instantly when the Unsubscribe button is clicked).

Answer 1

The jump you mentioned happens because first column shrinks when longer text “Radiohead” is removed and shorter text “U2” is the only factor defining the cell width in the first column. This problem can be solved by having fixed column widths in your table.