CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
Rhys Stephens
Rhys Stephens

Reputation: 899

Bootstrap 3.3.1 Modal Backdrop smaller than modal content

I have just upgraded to Bootstrap 3.3.1 from 3.2 due to it being a dependency on the Smart Admin theme that I use. I am using a modal dialog with remote content that is quite long. In the previous version the modal backdrop worked correctly: it was dark and would allow the modal content to scroll to longer than screen whilst remaining dark the entire screen size. e.g. Working Modal

Now, with version 3.3.1 the size of the modal backdrop is less than the size of the modal content. backdrop too small

How can I get it to work correctly?

Here is my code:

    <div class="pull-right">
        <a class="btn btn-primary" href="@Url.Action("Viewprint", new { qGroupId = Model.QuestionGroupId })" data-target="#myModal" data-toggle="modal" data-keyboard="false"><i class="fa fa-fw fa-lg fa-print"></i>Print Report</a>
    </div>
    <div class="clearfix"></div>
    <div class="widget-body">            
        <div class="modal fade" id="myModal">
            <div id="modalContainer" class="modal-dialog modal-lg">
                <div class="modal-content">
                </div>
            </div>
        </div>
    </div>

If I put the modal outside the widget-body div the same thing happens.

Upvotes: 2

Views: 7400

Answers (6)

Mhandzkie
Mhandzkie

Reputation: 209

I also got this problem in bootstrap 3.3.2. Backdrop doesn't resize its background when the modal content change dynamically. This problem also appear from bootstrap 3.3.0+

I fixed it with this:

 $('.modal').on('shown.bs.modal', function(e){
      $(this).modal('handleUpdate'); //Update backdrop on modal show
      $(this).scrollTop(0); //reset modal to top position
  });

Hope this can help!

Upvotes: 4

Rhys Stephens
Rhys Stephens

Reputation: 899

This issue has now been resolved in the Bootstrap 3.3.4 release so no hacking code is needed. https://github.com/twbs/bootstrap/pull/15881

Upvotes: 4

Orz
Orz

Reputation: 615

Based on @rhys-stephens answer, I've created a slightly better solution. The code bellow does not run on every mousemove, instead its fired only when 'shown'/'loaded' event is triggered (works on BS3).

This solution works when the modal is created/shown, some adjustments are required in case you want it to work with dynamic content height..

$("#modal, #modal-lg").on('shown.bs.modal, loaded.bs.modal', function () {
  var $modal        = $(this),
      $backdrop     = $('.modal-backdrop'),
      $modalContent = $modal.find('.modal-dialog'),
      $modalHeight  = function() {
        return ($modalContent.height() > $(window).height()) ? $modalContent.height() : $(window).height();
      };

$backdrop.css({
  height: $modalHeight * 1.1
});});

Upvotes: 0

Allencx.Wang
Allencx.Wang

Reputation: 81

If the content height of a already-shown modal dialog was increased (eg. click "Add Item" button to expand the "Selected Item List" within the modal-body), you can call this function to recalculate the backdrop:

$("#YOUR_MODAL_ID").data("bs.modal").handleUpdate();

It works for me, hope this can help you too!

Upvotes: 4

Rhys Stephens
Rhys Stephens

Reputation: 899

I used this jQuery hack to get it working:

$( window ).on( 'mousemove mouseup', function() {
      $backdrop  = $('.modal-backdrop');
      el_height  = $modal.innerHeight();
    $backdrop.css({
        height: el_height + 20,
    });
});

Upvotes: 0

cvrebert
cvrebert

Reputation: 9289

You are most likely encountering known & not-yet-fixed bugs https://github.com/twbs/bootstrap/issues/15418 and/or https://github.com/twbs/bootstrap/issues/15136

Upvotes: 1

Related Questions