CODEWITHSUNDEEP
twitter-bootstrap
makandroid
makandroid

Reputation: 289

Scrolling of modal window Bootstrap to bottom

I have a modal window Bootstrap with dynamic height (more than height of screen). How can I scroll the window to bottom programmatically? I tried to do this:

$('#modal').animate({ scrollTop: $('#modal').height() }, 500);

But variable $('#modal').height() is not changing while I'm resizing window. Any ideas?

Upvotes: 8

Views: 11593

Answers (6)

Rob
Rob

Reputation: 1216

None of these worked for me, perhaps because of bootstrap 5. This works:

var h = $('#modal_name .modal-body').height();
$("#modal_name .modal-body").scrollTop(h);

Upvotes: 0

Doc Hojo
Doc Hojo

Reputation: 16

With the new Bootstrap V5.x, you can now use:

jQuery('#modal').animate({ scrollTop: jQuery('#modal.modal-content').height() }, 'slow');

Upvotes: 0

Vee Joe
Vee Joe

Reputation: 31

Here is a modification of the working answer, this will scroll to the bottom of the modal. The other option did not get to the bottom but stopped at the middle.

    $("#modal .modal-body").animate({ scrollTop: $('#modal .modal-body').prop("scrollHeight")}, 'slow');

Remember to replace '#modal' with the Name of your own modal.

You might also want to make sure it works when you open the modal

   <script>
      $('#modal').on('shown.bs.modal', function () {
      $("#modal .modal-body").animate({ scrollTop: $('#modal .modal-body').prop("scrollHeight")}, 'slow');
    });
    </script>

Upvotes: 1

Azhar
Azhar

Reputation: 75

For Scrolling of Bootstrap modal window to bottom, here is what worked for me:

$('#modal .modal-body').animate({ scrollTop: $('#modal .modal-body').offset().top }, 'slow');

Upvotes: 0

chandler
chandler

Reputation: 1150

The other solution did not work for me however it was close.

Here is what worked for me: 

$('#modal').animate({ scrollTop: $('#modal .modal-content').height() }, 'slow');

Upvotes: 1

makandroid
makandroid

Reputation: 289

Solution is very easy: 

$('#modal').animate({ scrollTop: $('#modal .modal-dialog').height() }, 500);

Upvotes: 7

Related Questions