Bootstrap modal-body squeezed into modal-footer

Asked 22/1, 2016 at 23:13 Answered 8/9, 2022 at 8:15

Solved html twitter-bootstrap modal-dialog bootstrap-modal

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

Squeezed modal

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?

Malachite answered 22/1, 2016 at 23:13 Comment(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 – Amphibolite 22/1, 2016 at 23:20

@Amphibolite I've just fixed the col-md and the problem still here... Thank you for the advice – Malachite 22/1, 2016 at 23:23

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>

Stickup answered 22/1, 2016 at 23:26 Comment(3)

Or Just clear the floats in footer. That will also work. – Labiovelar 29/1, 2016 at 18:39

@Labiovelar 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. – Stickup 29/11, 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. – Wink 16/1, 2018 at 3:56

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

Fibrilla answered 8/9, 2022 at 8:15 Comment(0)

Recommended topics

Hot tags