Set bootstrap modal body height by percentage

Question

I am trying to make a modal with a body that will scroll when the content becomes too large  However  I want the modal to be responsive to the screen size  When I set the max-height to 40  it has no effect  However  if I set the max-height to 400px it works as expected  but is not responsive  I am sure I am just missing something simple  but I can t seem to get it to work   Here is an example  Doesn t work    modal-body       max-height 40        overflow-y  auto      Works    modal-body       max-height 400px       overflow-y  auto

User · Answer

The scss solution for Bootstrap 4 0   modal     max-height  100vh     modal-dialog        modal-content          modal-body           max-height  calc 80vh - 140px           overflow-y  auto                        Make sure the  modal max-height is 100vh  Then for  modal-body use calc   function to calculate desired height  In above case we want to occupy 80vh of the viewport  reduced by the size of header   footer in pixels  This is around 140px together but you can measure it easily and apply your own custom values  For smaller taller modal modify 80vh accordingly

User · Answer

This should work for everyone  any screen resolutions    modal-body       max-height  calc 100vh - 143px       overflow-y  auto      First  count your modal header and footer height  in my case I have H4 heading so I have them on 141px  already counted default modal margin in 20px top bottom    So that subtract 141px is the max-height for my modal height  for the better result there are both border top and bottom by 1px  for this  143px will work perfectly   In some case of styling you may like to use overflow-y  auto  instead of overflow-y  scroll   try it   Try it  and you get the best result in both computer or mobile devices  If you have a heading larger than H4  recount it see how much px you would like to subtract   If you don t know what I am telling  just change the number of 143px  see what is the best result for your case   Last  I d suggest have it an inline CSS

User · Answer

Instead of using a    the units vh set it to a percent of the viewport  browser window  size    I was able to set a modal with an image and text beneath to be responsive to the browser window size using vh   If you just want the content to scroll  you could leave out the part that limits the size of the modal body     When the modal fills the screen it has an even 2 5  on top and bottom     Centers the modal    modal-dialog     margin  2 5vh auto       Sets the maximum height of the entire modal to 95  of the screen height    modal-content     max-height  95vh    overflow  scroll       Sets the maximum height of the modal body to 90  of the screen height    modal-body     max-height  90vh      Sets the maximum height of the modal image to 69  of the screen height    modal-body img     max-height  69vh

User · Answer

This worked for me   modal-dialog   modal-content          80  of window height        height  80       modal-body          100    dialog height  120px   header   footer        max-height  calc 100  - 120px       overflow-y  scroll      Fiddle  http   jsfiddle net mehmetatas 18dpgqpb 2

User · Answer

You ve no doubt solved this by now or decided to do something different  but as it has not been answered  amp  I stumbled across this when looking for something similar I thought I d share my method   I ve taken to using two div sets  One has hidden-xs and is for sm  md  amp  lg device viewing  The other has hidden-sm  -md  -lg and is only for mobile  Now I have a lot more control over the display in my CSS   You can see a rough idea in this js fiddle where I set the footer and buttons to be smaller when the resolution is of the -xs size      lt div class  modal-footer  gt         lt div class  hidden-xs  gt             lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt       lt button type  button  class  btn btn-primary  gt Save changes lt  button gt         lt  div gt         lt div class  hidden-sm hidden-md hidden-lg sml-footer  gt       lt button type  button  class  btn btn-xs btn-default  data-dismiss  modal  gt Close lt  button gt       lt button type  button  class  btn btn-xs btn-primary  gt Save changes lt  button gt         lt  div gt     lt  div gt

[html] Set bootstrap modal body height by percentage

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

[html] Set bootstrap modal body height by percentage

Examples related to html

Examples related to css

Examples related to twitter-bootstrap

Examples related to modal-dialog