I have a modal bootstrap window that normally has the scroll for the body.
How can I make the scroll of the modal appear for the entire modal window? since when the body grows, when adding components, I can not see the top of the modal
I have a modal bootstrap window that normally has the scroll for the body.
How can I make the scroll of the modal appear for the entire modal window? since when the body grows, when adding components, I can not see the top of the modal
With css we can do it with a simple code style="overflow-y: scroll;" in the div main% of modal , we simply add it and already create a scroll only for the modal that you indicate it.
$(document).on('click', '#Crear', function() {
$('#ModalCrear').modal('show');
});
$(document).on('click', '#agregar_nombres', function() {
$('#ModalAgregarNombre').modal('show');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<button type="button" id="Crear" class="btn btn-primary">
<span class="fa fa-plus"></span> Agregar
</button>
<div id="ModalCrear" class="modal fade" role="dialog" style="overflow-y: scroll;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-tittle">Crear</h4>
</div>
<form class="form-horizontal" role="form" id="form-crear">
<div class="modal-body">
<div class="row form-group col-md-12">
<label for="crear_codigo" class="control-label col-sm-2 col-xs-12">Código: </label>
<div class="col-sm-4 col-xs-6">
<input type="number" class="form-control" id="crear_codigo" name="crear_codigo">
</div>
</div>
<div class="row form-group col-md-12">
<label for="crear_nombre" class="control-label col-sm-2 col-xs-12">Nombre: </label>
<div class="col-sm-6 col-xs-10 selectContainer">
<select id="crear_nombre" name="crear_nombre" class="form-control" style="width: 100%;">
<option value="0">Seleccione...</option>
<option value="1">Clorace</option>
<option value="2">Miovit</option>
</select>
</div>
<div class="col-sm-2 col-xs-2">
<button type="button" class="btn btn-primary" id="agregar_nombres">
<span class="fa fa-plus"></span>
<span class="hidden-xs"> Agregar Items</span>
</button>
</div>
</div>
<div class="row form-group col-md-12">
<label for="crear_formas_farmaceuticas" class="control-label col-sm-2 col-xs-12">Forma Farmacéutica: </label>
<div class="col-sm-6 col-xs-10 selectContainer">
<select id="crear_formas_farmaceuticas" class="form-control" name="crear_formas_farmaceuticas" style="width: 100%;">
<option value="0">Seleccione...</option>
<option value="1">Inyección</option>
<option value="2">Jarabe</option>
</select>
</div>
<div class="col-sm-1 col-xs-2">
<button type="button" class="btn btn-primary" id="agregar_formas">
<span class="fa fa-plus"></span>
<span class="hidden-xs"> Agregar Items</span>
</button>
</div>
</div>
<div class="row form-group col-md-12">
<label for="crear_presentacion" class="control-label col-sm-2 col-xs-12">Presentación: </label>
<div class="col-sm-3 col-xs-5">
<input type="number" class="form-control" id="crear_presentacion" name="crear_presentacion">
</div>
<div class="col-sm-4 col-xs-7 selectContainer">
<select id="crear_unidad_de_medicion_p" class="form-control" name="crear_unidad_de_medicion_p" style="width: 100%;">
<option value="0">Seleccione...</option>
<option value="1">(und) Unidad</option>
<option value="2">(ml) Mililitro</option>
<option value="2">(mg) Miligramo</option>
</select>
</div>
</div>
<div class="row form-group col-md-12">
<label for="crear_unidad_teorica" class="control-label col-sm-2 col-xs-12">Unidad Teórica: </label>
<div class="col-sm-5 col-xs-5">
<input type="number" class="form-control" id="crear_unidad_teorica" name="crear_unidad_teorica">
</div>
<div class="col-sm-4 col-xs-7 selectContainer">
<select id="crear_unidad_de_medicion_u" class="form-control" name="crear_unidad_de_medicion_u" style="width: 100%;">
<option value="0">Seleccione...</option>
<option value="1">(und) Unidad</option>
<option value="2">(ml) Mililitro</option>
<option value="2">(mg) Miligramo</option>
</select>
</div>
</div>
<div class="row form-group col-md-12">
<label for="crear_velocidad" class="control-label col-sm-2 col-xs-12">Velocidad del Producto: </label>
<div class="col-sm-3 col-xs-5">
<input type="number" class="form-control" id="crear_velocidad" name="crear_velocidad">
</div>
<label class="col-sm-5 col-xs-7">
<h4>
<sup id="crear_unidad_de_medicion_v_u" name="crear_unidad_de_medicion_v_u">
</sup>
/
<sub id="crear_unidad_de_medicion_v_t" name="crear_unidad_de_medicion_v_t">
min
</sub>
</h4>
</label>
</div>
<div class="row form-group col-md-12">
<label class="control-label col-sm-2 col-xs-12">Tiempo Teórico: </label>
<label class="col-sm-7 col-xs-7">
<h4>
<sub id="crear_tiempo_teorico" name="crear_tiempo_teorico">
</sub>
</h4>
</label>
</div>
<div class="row form-group col-md-12">
<label for="crear_linea_de_produccion" class="control-label col-sm-2">Linea de Producción:</label>
<div class="col-sm-8 selectContainer">
<select id="crear_linea_de_produccion" class="form-control" name="crear_linea_de_produccion" style="width: 100%;">
<option value="0">Seleccione...</option>
<option value="1">Liquidos Esteriles</option>
<option value="2">Liquidos No Esteriles</option>
<option value="2">Solidos</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
<span class="hidden-xs"> Cerrar</span>
</button>
<button type="button" id="Guardar" name="Guardar" class="btn btn-primary">
<span class="fa fa-save"></span>
<span class="hidden-xs"> Guardar</span>
</button>
</div>
</form>
</div>
</div>
</div>
<div id="ModalAgregarNombre" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-tittle">Agregar</h4>
</div>
<form class="form-horizontal" role="form" id="form-agregar">
<div class="modal-body">
<div class="form-group col-md-12">
<label for="agregar_nombre" class="control-label col-sm-4">Nombre: </label>
<div class="col-sm-8">
<input type="text" class="form-control" id="agregar_nombre" name="agregar_nombre">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span><span class="hidden-xs"> Cerrar</span>
</button>
<button type="button" id="GuardarNombre" name="GuardarNombre" class="btn btn-primary">
<span class="fa fa-save"></span><span class="hidden-xs"> Guardar</span>
</button>
</div>
</form>
</div>
</div>
</div>NOTE:
Execute it in the demo screen and open the 2nd modal with the first button of the plus , you will see that it has a scroll for the.
I guess what you want to do is apply even scroll to .modal-body for when it exceeds a certain height it shows the scroll , if that is what you want to do just add this rule in your CSS:
.modal-body{
height: 95px;
width: 100%;
overflow-y: auto;
}
This applies a fixed height to the body of the modal so it allows you to see the .modal-header and .modal-footer . I leave the example.
.modal-body{
height: 100px;
width: 100%;
overflow-y: auto;
}<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">
<!-- 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>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique et magna nec imperdiet. Mauris nec rutrum nunc. Pellentesque sit amet dui dolor. Proin vel feugiat libero. Vestibulum et neque posuere, varius odio quis, varius quam. Cras lacinia
sapien a leo tincidunt tincidunt. Integer a nunc non nisl tempus faucibus. Aliquam at efficitur justo. Proin sapien eros, facilisis et interdum in, elementum at elit. Mauris porttitor justo sed ante ultrices tincidunt. Morbi placerat ornare nibh
in consectetur. Pellentesque sollicitudin vulputate consectetur. Ut vehicula ex pretium lacus faucibus, non venenatis purus tincidunt. Praesent efficitur vitae ex quis aliquam. Phasellus dapibus quam sodales ipsum suscipit, facilisis accumsan
leo efficitur. Etiam vestibulum maximus sollicitudin. Phasellus pulvinar diam non enim tempus efficitur a id tortor. Aliquam vel consectetur tortor. Praesent fringilla gravida lacus in faucibus. Vestibulum a velit volutpat, vehicula mauris at,
scelerisque purus.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div> What worked for me is to place a style="overflow-y:auto" at div .modal (within the what is the whole dialog) so that a scroll is made in the whole dialogue:
<div class="modal fade in" tabindex="-1" role="dialog" id="DetailsDialog" style="overflow-y: auto; display: block;" aria-hidden="false">
<div class="modal-dialog" role="document">
...
</div><!-- /.modal-dialog -->
</div>