Bootstrap Modal auto height issue

Question

I developed box slider with ajax and bootstrap modal popup. But issue is do not take default height of images and display as below.

When I resize window then it display proper in screen. My question is how to forcefully trigger window resize function to solve my problem?

Note : When I press f12 or resize window then it work perfect. But initially loaded as given in screenshot.

AJAX Calling

$.ajax({
                type: "POST",
                url: URL,
                data: {id: id},
                success: function (result) {
                    $(".modal-body").html('<ul class="bxslider"></ul>');
                    $(".bxslider").append(result);
                    $('.bxslider').bxSlider();
                },
                complete: function (result) {
                     $(window).trigger('resize');
                }
            });

Answer 1

Try this

         $.ajax({
            type: "POST",
            url: URL,
            data: {id: id},
            success: function (result) {
                $(".modal-body").html('<ul class="bxslider"></ul>');
                $(".bxslider").append(result);
                     $(".bxslider image").load(function(){
                     $(window).trigger('resize');
                 });
                $('.bxslider').bxSlider();
            },
            complete: function (result) {

            }
        });