CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Ralf Glaser
Ralf Glaser

Reputation: 793

Bootstrap 3 - set height of modal window according to screen size

I am trying to create a kind of responsive megamenu using Bootstrap 3 modal dialog. I would like to set the width and height of the whole modal window to 80% of the viewport, while setting the modal-body to a max-height in order not to populate the whole screen on large viewports.

My HTML:

    <div class="modal fade">
            <div class="modal-dialog modal-megamenu">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
                        <h4 class="modal-title">Modal Mega Menu Test</h4>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                            <div class="col-md-3"></div>
                        </div>
                    </div>
                </div>
                    <div class="modal-footer">
                        <button type="button" data-dismiss="modal" class="btn btn-primary">close</button>
                    </div>
             </div>
        </div>

My CSS:

.modal-megamenu {
    width:80%;
    height:80%;
}

.modal-body {
    max-height:500px;
    overflow:auto;
}

This works as intended for the width, but the "height" parameter doesn't give any result. Like that, the height of the modal window is always set to the max-height value. Does anybody have an idea of how to set the height dynamically according to the viewport height?

Upvotes: 59

Views: 135082

Answers (6)

Sibtain
Sibtain

Reputation: 108

I am using jquery for this. I mad a function to set desired height to the modal(You can change that according to your requirement). Then I used Modal Shown event to call this function. Remember not to use $("#modal").show() rather use $("#modal").modal('show') otherwise shown.bs.modal will not be fired.

That all I have for this scenario.

var offset=250; //You can set offset accordingly based on your UI
function AdjustPopup() 
{
    $(".modal-body").css("height","auto");
    if ($(".modal-body:visible").height() > ($(window).height() - offset)) 
    {
        $(".modal-body:visible").css("height", ($(window).height() - offset));
    }
}
//Execute the function on every trigger on show() event.
$(document).ready(function(){
$('.modal').on('shown.bs.modal', function (e) {
        AdjustPopup();
    });
});
//Remember to show modal like this
$("#MyModal").modal('show');

Upvotes: 0

keaukraine
keaukraine

Reputation: 5364

I assume you want to make modal use as much screen space as possible on phones. I've made a plugin to fix this UX problem of Bootstrap modals on mobile phones, you can check it out here - https://github.com/keaukraine/bootstrap-fs-modal

All you will need to do is to apply modal-fullscreen class and it will act similar to native screens of iOS/Android.

Upvotes: 0

Daniel Garmoshka
Daniel Garmoshka

Reputation: 6354

Pure CSS solution, using calc 

.modal-body {
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

200px may be adjusted in accordance to height of header & footer

Upvotes: 85

Tiago
Tiago

Reputation: 1991

To expand on Ryand's answer, if you're using Bootstrap.ui, this on your modal-instance will do the trick:

    modalInstance.rendered.then(function (result) {
        $('.modal .modal-body').css('overflow-y', 'auto'); 
        $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
        $('.modal .modal-body').css('height', $(window).height() * 0.7);
    });

Upvotes: 5

Ryand.Johnson
Ryand.Johnson

Reputation: 1906

Similar to Bass, I had to also set the overflow-y. That could actually be done in the CSS

$('#myModal').on('show.bs.modal', function () {
    $('.modal .modal-body').css('overflow-y', 'auto'); 
    $('.modal .modal-body').css('max-height', $(window).height() * 0.7);
});

Upvotes: 48

Bass Jobsen
Bass Jobsen

Reputation: 49044

Try:

$('#myModal').on('show.bs.modal', function () {
$('.modal-content').css('height',$( window ).height()*0.8);
});

Upvotes: 31

Related Questions