1

Ya he probado con style="position: fixed;bottom: 0;" pero sólo me aparece de lado izquierdo los dos botones no lo muestra bien

<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>

Se queda arriba y no hacia abajo

introducir la descripción de la imagen aquí

así me lo deja cuando lo pongo position:fixed; bottom:0;

introducir la descripción de la imagen aquí

2
  • agregale left:0 y right:0 asi va de lado a lado pegado al bottom Commented el 18 oct. 2018 a las 23:03
  • era eso si me funciono
    – Juan Jose
    Commented el 18 oct. 2018 a las 23:10

3 respuestas 3

3

El problema son los estilos inline que le pusiste al modal con id="modal_datos_servicio_valuaciones".

Particularmente estos 2 estilos: {width: 1680px;margin-left: -50%;}

Hacen que desarrollar el resto del modal sea difícil. No estoy seguro por qué tienes esos estilos inline, pero creo que la solución pasa por pensar una mejor manera de lograr ese objetivo.

Luego de remover esos estilos inline, basta poner este css y listo.

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

Aquí te dejo un fiddle funcional: https://jsfiddle.net/m0gnz6oy/

1
  • por favor agrega el código también aqui, pues esta respuesta debe ser útil no solo para quien pregunta si no para usuarios futuros; del mismo modo cuando lo agregues seleccionalo y dale clic a {}
    – user75901
    Commented el 18 oct. 2018 a las 23:24
2

Si estás utilizando Bootstrap puedes hacer uso de la clase 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>

-2

Por que simplemente no agregas el tag Footer, con eso todo lo que pongas allí, estara por defecto en el pie de pagina. ejemplo: Contenido...

1
  • 1
    el hecho de agregar el tag footer no hace que mágicamente se comode al final eso se logra con css
    – user75901
    Commented el 18 oct. 2018 a las 23:03

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.