9

I'm creating some modals with Bootstrap.

I'm using different div's as showed in Bootstrap component explanation.

What I'm experiencing is that when my screen size is larger than x (mean some unknown value) the div containing my modal-body is pushed up (empty), and the div containing my modal-footer absorb elements on modal-body.

This is an image to explain what I'm saying:

Normal modal normal bootstrap modal

Squeezed modal enter image description here

Code it's the same, just change the screen size.

<HTML>
  <head>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
  </head>
  <body>
    <div id='modal' class='modal-dialog'>
      <div class='modal-content'>
        <div class='modal-header'>
          <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
            <span aria-hidden='true'>&times;</span>
          </button>
          <h4 class='modal-title'>Change name</h4>
        </div>
        <div class='modal-body'>
          <form id='formModal' method='post' action='giocatori.php'>
            <div class='form-group col-md-12'>
              <label>Name</label>
              <input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'>
            </div>        
          </form>
        </div>
        <div class='modal-footer'>
          <button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
          <button type='button' class='btn btn-primary'>Salva</button>
        </div>
      </div>
    </div>
  </body>
</HTML>

If you want experience the squeezed modal, run the snippet and then press on Full page button.

How can I avoid squeezed body?

2
  • You use col-md-4 on your form group. That might be tour issue. I cant test it but 4 is 1/3 of your modal. Its possible you have a class conflicting with bootstrap. Try col-md-12
    – Dorvalla
    Jan 22, 2016 at 23:20
  • @Dorvalla I've just fixed the col-md and the problem still here... Thank you for the advice
    – xdola
    Jan 22, 2016 at 23:23

2 Answers 2

16

Bootstrap's column classes are designed to be used with row classes, and not combined with other elements/classes. The row and column classes work together to ensure floats get cleared. Try this:

<HTML>

<head>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>
  <div id='modal' class='modal-dialog'>
    <div class='modal-content'>
      <div class='modal-header'>
        <button type='button' class='close' data-dismiss='modal' aria-label='Close'>
          <span aria-hidden='true'>&times;</span>
        </button>
        <h4 class='modal-title'>Change name</h4>
      </div>
      <div class='modal-body'>
        <form id='formModal' method='post' action='giocatori.php'>
          <!-- use a row class -->
          <div class='row'>
            <!-- keep the col class by itself -->
            <div class='col-md-4'>
              <div class='form-group'>
                <label>Name</label>
                <input id='nome_iscrizione' type='text' class='form-control' name='name' value='New name'>
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class='modal-footer'>
        <button type='button' class='btn btn-default' data-dismiss='modal'>Chiudi</button>
        <button type='button' class='btn btn-primary'>Salva</button>
      </div>
    </div>
  </div>
</body>

</HTML>

3
  • Or Just clear the floats in footer. That will also work.
    – WitVault
    Jan 29, 2016 at 18:39
  • 1
    @WitVault There's lots of ways to make things "work". It's best to choose the way that meshes with the semantics of the framework at hand, so that other developers can easily work with your code.
    – Sean
    Nov 29, 2016 at 19:44
  • I had the same problem by adding another <div> with a class row i.e. (<div class="row"> </div>) and then moving all the other <div class="col-md-6 col-lg-6 col-sm-6"> inside it fixed the footer.
    – Big Smile
    Jan 16, 2018 at 3:56
0

Bit late on this, but I had the same issue. The fix is to make the form of class "form-horizontal".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.