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

Question

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        lt div class  modal fade  gt               lt div class  modal-dialog modal-megamenu  gt                   lt div class  modal-content  gt                       lt div class  modal-header  gt                           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt x lt  button gt                           lt h4 class  modal-title  gt Modal Mega Menu Test lt  h4 gt                       lt  div gt                       lt div class  modal-body  gt                           lt div class  row  gt                               lt div class  col-md-3  gt  lt  div gt                               lt div class  col-md-3  gt  lt  div gt                               lt div class  col-md-3  gt  lt  div gt                               lt div class  col-md-3  gt  lt  div gt                           lt  div gt                       lt  div gt                   lt  div gt                       lt div class  modal-footer  gt                           lt button type  button  data-dismiss  modal  class  btn btn-primary  gt close lt  button gt                       lt  div gt                lt  div gt           lt  div gt    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

User · Answer

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  amp  footer

User · Answer

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

User · Answer

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

User · Answer

Try       myModal   on  show bs modal   function          modal-content   css  height     window   height   0 8

User · Answer

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    x000D   x000D  var offset 250    You can set offset accordingly based on your UI x000D  function AdjustPopup    x000D    x000D          modal-body   css  height   auto    x000D      if      modal-body visible   height    gt     window  height   - offset    x000D        x000D              modal-body visible   css  height      window  height   - offset    x000D        x000D    x000D    Execute the function on every trigger on show   event  x000D    document  ready function    x000D      modal   on  shown bs modal   function  e    x000D          AdjustPopup    x000D          x000D      x000D    Remember to show modal like this x000D      MyModal   modal  show    x000D   x000D   x000D

User · Answer

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

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

Examples related to jquery

Examples related to css

Examples related to twitter-bootstrap