CODEWITHSUNDEEP
twitter-bootstrap-3bootstrap-modal
Becca
Becca

Reputation: 1580

Dynamically setting max-height of Bootstrap modal body

I'm trying to dynamically set the max-height of Bootstraps modal-body elements for all modal dialog boxes. I've written the following, which seems to work when the dialog is opened. I'm depending on the enforceFocus method to exist and to be called once the dialog is rendered. I realize there may be moment before the CSS property is set where the dialog will not be rendered exactly right, but I'm okay with that. Is there anything wrong with this solution? I know I have yet to account for resizing the screen with a modal open, but that seems the easier problem to solve.

(function ($) {
    $.fn.modal.Constructor.DEFAULTS.backdrop = 'static';
    $.fn.modal.Constructor.DEFAULTS.keyword = false;

    var oldEnforceFocus = $.fn.modal.Constructor.prototype.enforceFocus;
    $.fn.modal.Constructor.prototype.enforceFocus = function () {
        oldEnforceFocus.call(this);
        var $element = this.$element;

        var maxHeight =
            $("body").height() // full page
          - $element.find(".modal-header").outerHeight(true) // modal header
          - $element.find(".modal-footer").outerHeight(true) // modal footer
          - ($element.find(".modal-dialog").outerHeight(true) - $element.find(".modal-dialog").height()) // dialog margins
          - 5; // fudge factor
        $element.find(".modal-body").css("max-height", maxHeight);
    }
})(jQuery);

Thanks!

edit: To give credit where credit is due, this is based on Correct way to extend Bootstrap Modal - lock, unlock.

Upvotes: 0

Views: 2270

Answers (2)

Shehary
Shehary

Reputation: 9992

@Josh solution is good with CSS and media queries but writing so many media queries where small devices has different screen heights e.g Iphone and SamSung G and N series, required alot of media queries to even calculate close-ish modal height on different screen sizes.

so setting height of modal (modal-body) dynamically according to media screen size and on small devices where there will be 2 types of media screen landscape and portrait, following few lines of code will put you very close-ish to your goal

Rendering modal HTML according to screen size with-in sec and later if screen size changes adjust it's height according to screen size

$(document).ready(function () {
    setInterval(Dimension, 100);

    function Dimension() {
        var doc = $(document).height(); // document height
        var head = $(".modal-header").height(); // modal header height
        var footer = $(".modal-footer").height(); // modal footer height
        var modheight = doc - head - footer - 65; // 65 is extra margins and it will not effect the height of modal any way if not changed.
        $('.modal-body').css('height', modheight);
    }
});

Note Few Changes required in Modal CSS

CSS

.modal-dialog {
    margin: 0px auto !important;
}
.modal-body {
    overflow-y: scroll; // In-case the content in modal-body overflow so it will have scrolling.
}

Fiddle

You can check the modal height adjust itself by increasing and decreasing the fiddle result window's height and width.

Upvotes: 1

Josh Palmeri
Josh Palmeri

Reputation: 159

If you don't want to use javascript, you can use CSS media queries and get close-ish to the height you need by using min-height. For example, define a media query on min-height: 540px, and set the max-height of the modal to something like max-height: 500px. Then define a media query at say min-height: 680px and set the modal to max-height: 640px. It's not fluid, and it requires several media queries to inch up to the largest size you want to plan for, but it will get you there.

Upvotes: 1

Related Questions