Ciprian Cercel Ciprian Cercel - 3 months ago 11
HTML Question

Layout in my modal not showing right

I have this code in my page, is working, but when the modal window appears, large, my footer appears over the above content. Must be something I do not see in my code, maybe someone can help me?

You can see it in here

<a class="btn btn-sm btn-info" href="#addVolum" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> Adauga volum</a>

<div class="modal fade" id="addVolum">
<div class="modal-dialog">
<form action="" method="post" role="form" class="form-horizotal">
<div class="modal-content">

<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h5 class="modal-title">Adaugare volum nou</h5>
</div>

<div class="modal-body">

<div class="form-group">
<label for="loc" class="cotrol-label col-sm-2">Localitate</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="loc" id="loc" placeholder="Localitate">
</div>

<label for="siruta" class="control-label col-sm-2">Cod SIRUTA</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="siruta" id="siruta" placeholder="SIRUTA">
</div>
</div>

<div class="form-group">

<div class="col-sm-6">
<select name="tip" id="tip" class="form-control">
<option>1 - PFL</option>
<option>2 - PFS</option>
<option>3 - PJL</option>
<option>4 - PJS</option>
</select>
</div>

<label for="vol" class="control-label col-sm-2">Volum</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="vol" id="vol" maxlength="3" placeholder="Volum">
</div>
</div>

<div class="form-group">
<label for="nr_poz" class="control-label col-sm-2">Numar pozitii fizice:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="nr_poz" id="nr_poz" placeholder="Nr. pozitii">
</div>

<label for="nr_pr_poz" class="control-label col-sm-2">Numarul primei pozitii:</label>
<div class="col-sm-4">
<input type="text" class="form-control" name="nr_pr_poz" id="nr_pr_poz" placeholder="Nr. pozitie">
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-default " data-dismiss="modal">Inchide</button>
<button type="submit" class="btn btn-success" name="trimite" value="Creaza volum">Creaza volum
<span class="glyphicon glyphicon-check"></span>
</button>
</div>
</div>
</form>
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

Answer

The probable cause here is that modal-body doesn't get an actual height because all it's contents are floated. You can add a clearfix class in the end of your body.

Then one might say "But form-control isn't floted". Yes, but all your content inside each form-control uses col-X, which is float:left. Therefore your form-control doesn't have an actual height either.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<a class="btn btn-sm btn-info" href="#addVolum" data-toggle="modal"><span class="glyphicon glyphicon-plus"></span> Adauga volum</a>

<div class="modal fade" id="addVolum">
<div class="modal-dialog">
    <form action="" method="post" role="form" class="form-horizotal">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h5 class="modal-title">Adaugare volum nou</h5>
        </div>
        <div class="modal-body">
                <div class="form-group">
                    <label for="loc" class="cotrol-label col-sm-2">Localitate</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="loc" id="loc" placeholder="Localitate">
                    </div>

                    <label for="siruta" class="control-label col-sm-2">Cod SIRUTA</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="siruta" id="siruta" placeholder="SIRUTA">
                    </div>
                </div>
                <div class="form-group">

                    <div class="col-sm-6">
                        <select name="tip" id="tip" class="form-control"> 
                            <option>1 - PFL</option>
                            <option>2 - PFS</option>
                            <option>3 - PJL</option>
                            <option>4 - PJS</option>
                        </select>
                    </div>

                    <label for="vol" class="control-label col-sm-2">Volum</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="vol" id="vol" maxlength="3" placeholder="Volum">
                    </div>
                </div>

                <div class="form-group">    
                    <label for="nr_poz" class="control-label col-sm-2">Numar pozitii fizice:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="nr_poz" id="nr_poz" placeholder="Nr. pozitii">
                    </div>

                    <label for="nr_pr_poz" class="control-label col-sm-2">Numarul primei pozitii:</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="nr_pr_poz" id="nr_pr_poz" placeholder="Nr. pozitie">
                    </div>
                </div>
          <! -- Clearfix in the end of the body -->
<div class="clearfix"></div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default " data-dismiss="modal">Inchide</button>
            <button type="submit" class="btn btn-success" name="trimite" value="Creaza volum">Creaza volum
                <span class="glyphicon glyphicon-check"></span>
            </button>
          
        
      </div>
    </div>  
    </form>
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->