Home / Questions / 59100
Accepted
lucho
Asked: 2020-03-31 02:30:20 +0800 CST 2020-03-31 02:30:20 +0800 CST

Set scroll to bootstrap modal window and not just its body

  • 772

I have a bootstrap modal window that normally has the scroll for the body.

How can I make the modal scroll appear for the entire modal window? since when the body grows, when adding components, I can't see the top of the modal

javascript

3 Answers

  1. Best Answer

    With csswe can do it with a simple code style="overflow-y: scroll;"in the divmain of the modal, we simply add it and it already creates a scrollsingle for modalwhich 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:

    Run it on the small demo screen and open the 2nd modalwith the first button of the plus, you will see that it has a scrollfor it.

    • 2

  2. I suppose that what you want to do is to apply even scrollwhen .modal-bodyit exceeds a certain height the is displayed scroll, if that is what you want to do, you just have to 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 you can see the .modal-headerand .modal-footer. I leave you 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">&times;</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>

    • 2

  3. What has worked for me is style="overflow-y:auto"to place a div .modal(within which the entire dialog is) so that the entire dialog is scrolled:

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