How to prevent table row height glitch during DOM append?

Question

I load my table first, then I dynamically append tags asynchronously. As soon as those tags are appended, the table row height seems to shift up. How can I prevent that ?

I've tried

.portfolio-table tr {
    height: 80px;
}

Table



            @foreach ($portfolios as $portfolio)
            

        @endforeach

    
    
        #
        Name
        Tags
        Edit
        Delete
    

    

        {{ $portfolio->id }} 

            
                
                    {{ $portfolio->name }}
                
            

            
                
                

            


            
                
                    Edit
                
            

            
                
                    Delete

ajax

$("tbody").each(function(){
    $($(this)).find('tr').each(function(){

        var selector = $(this);
        var id = $(this).find('td:nth-child(1) ').attr('title');
        // console.log('%c id = ' + id, "color: green;");
        // return false;
        var data = {};
        data.id  = id;

        $.ajax({
            method: 'POST',
            url: '/api/portfolio/' + id + '/skills',
            crossDomain: true,
            contentType: false,
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('value'),
                "Accept": "application/json",
                "Content-Type": "application/x-www-form-urlencoded",
                "Cache-Control": "no-cache"
            },
            data: data,
            success: function(response){
                console.log(id, response);

                $('p.portfolioSkillTags#'+ id).prev('img').fadeOut();

                for (i = 0; i < response.length; i++) {
                    // console.log(response[i],id);

                    var name  = response[i]['name'];
                    var color = response[i]['color'];

                    $('p.portfolioSkillTags#'+id).prepend('' + name + '').fadeIn('slow');
                }

            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });



    });
});

user_1432711 · Answer

It seems the loading spinner image causes the glitch since it makes the

text oveerflow. You can try fix it with some css style like float right so it wont make the paragraph wrap.

user_10578638 · Answer

The issue is with the height of the spinner (svg element). When you loads the data asynchronously, it brings the spinner with larger height. As soon as your API call resolves successfully, the spinner element (which has larger height goes away). Then your other data that can be retained in less height shrinks and produces this issue.

You can fix it with many ways, the simplest one is, keep the height(including paddings) of spinner (svg) element smaller than height of td element. For example:




.portfolio-table tr td {
    height: 50px;
}

UODATE

Please rectify the HTML as well, you might want to start the foreach loop outside the start tag of tr HTML element.

@foreach ($portfolios as $portfolio)


            {{ $portfolio->id }} 

            
                
                    {{ $portfolio->name }}
                
            

            
                
                

            


            
                
                    Edit
                
            

            
                
                    Delete
                
            

        

        @endforeach

user_2964636 · Answer

$('p.portfolioSkillTags#'+ id).prev('img').fadeOut();

make this to

$('p.portfolioSkillTags#'+ id).prev('img').hide();

and Please rectify the HTML as well, you might want to start the foreach loop outside the start tag of tr HTML element as mentioned by Prince

user_3795575 · Answer

I think the problem is a css animation. Try something to globally enforce to disable them to see if the behavior disappear.

* {
    animation: none !important;
}

If that is the case disable the animation with the right css selector when you are loading your data.

How to prevent table row height glitch during DOM append?

4 Answers