how can I make the footer stay down

Navigation
1

I have already tried with style="position: fixed;bottom: 0;" but it only appears on the left side the two buttons do not show it well 

<div class="modal hide fade" 
  id="modal_datos_servicio_valuaciones" align="left"
  style="width: 1680px;margin-left: -50%; height:815px; margin-top:-5%">
  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">×</button>

      <h3 align="center">Aprobacion de Servicio</h3>

    </div>

    <div class="modal-body">
      <table id="table1" style="border-collapse: collapse; width: 100%;">
        <tr>
          <th padding="5px" colspan="1">
            <label>Unidad</label><input type="text" name="unidad" id="unidad">
            <label>KMS.</label><input type="text" name="km" id="km">
            <label>Serie</label><input type="text" name="serie" id="serie">
          </th>
        </tr>
      </table>
      <label>Vendedor</label><input type="text" name="vendedor" id="vendedor">
      <label>Cliente</label><input type="text" name="cliente" id="cliente">

      <label>Completa la información</label>
      <input type="hidden" name="id" id="id" value="">
    </div>

    <div class="modal-footer" style="bottom: 0;" align="center">

      <a href="#" class="btn" data-dismiss="modal">Close</a>
      <div class="btn btn-primary datos_servicio">Registrar</div>
    </div>
  </div>
</div>

Stays up and not down

so he leaves it to me when I put it position:fixed; bottom:0;

    
asked by Juan Jose 19.10.2018 в 00:55
source

3 answers

3

The problem is the inline styles that you put to the modal with id="modal_datos_servicio_valuaciones".

Particularly these 2 styles: {width: 1680px;margin-left: -50%;}

They make developing the rest of the modal difficult. I'm not sure why you have those inline styles, but I think the solution is to think of a better way to achieve that goal.

After removing those inline styles, just put this css and go. 

.modal-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Here is a functional fiddle: link

    
answered by 19.10.2018 в 01:22
2

If you are using Bootstrap you can use the class fixed-bottom

Bootstrap 4 

#abajo {
  background: #fe0;
  color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">


<body>
  <div id="abajo" class="fixed-bottom">Si estás utilizando Bootstrap puedes hacer uso de la clase
    <pre>fixed-bottom</pre>
  </div>

</body>
    
answered by 19.10.2018 в 00:59
0

Because you simply do not add the Footer tag, with that everything you put there will be by default in the footer. example:   Content...

    
answered by 19.10.2018 в 01:02
Convert an array of Integers to an array of Characters with hexadecimal format Close a modal using JQuery and Materialize?