3

Tengo un modal en el cual indico información preliminar para realizar dichas acciones, pero algunos datos superan el espacio del modal. Aca un ejemplo de un modal que uso.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="ModalEliminar" class="modal fade in" role="dialog" style="overflow-y: scroll; display: block;" aria-hidden="false">
     <div class="modal-dialog modal-sm">
          <div class="modal-content"> 
               <div class="modal-header">
                    <h4 class="modal-tittle">Eliminar </h4>                </div> 
               <form class="form-horizontal" role="form">
                    <div class="panel-body">
                         <input type="hidden" class="form-control" id="eliminar_id" disabled="" value="4">
                         <div class="form-group col-md-12">
                              ¿Esta seguro de eliminar este item?
                         </div>
                         <div class="form-group col-md-12">
                              <label class="control-label">Código: </label>
                              <div>
                                   <span id="eliminar_codigo">10000</span>
                              </div> 
                         </div> 
                         <div class="form-group col-md-12">
                              <label class="control-label">Nombre: </label>
                              <div>
                                   <span id="eliminar_nombre">Miovit producto que requiere cuidado y esterilización antes de entrar al proceso</span>
                              </div>
                         </div> 
                         <div class="form-group col-md-12">
                              <label class="control-label">Presentación: </label>
                              <div>
                                   <span id="eliminar_presentacion">Jarabe<br>155 gg</span>
                              </div> 
                         </div>
                         <div class="form-group col-md-12">
                              <label class="control-label">Área Productiva:</label>
                              <div>
                                   <span id="eliminar_linea_de_produccion">ASDF6546546546SADF541652SDF1651654165SDFSADF4641452451</span>
                              </div>
                         </div>
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">
	<span class="fa fa-remove"></span>  
	<span class="hidden-xs"> Cerrar</span> 
</button>                          <button type="button" id="Eliminar" class="btn btn-primary">
    <span class="fa fa-trash"></span> 
	<span class="hidden-xs"> Eliminar</span> 
</button>                    </div>
               </form>
          </div>
     </div>
</div>

Si se que hay otros modals como el lg y el normal. Pero abarcan mucho mas de lo que yo necesito, o si utilizara el lg el se adaptara al contenido, es el objetivo de mi pregunta.

NOTA: si se que no hay un código tan exageradamente largo pero pueden haber otros textos X en mi web q pueden superar la cantidad de espacio que hay en el modal.

PD: darle a "pantalla completa" para observar el modal como funciona en mi sistema.

De antemano gracias al que pueda ayudarme.

2
  • En esta linea usa modal-resize como puedes ver div class="modal-dialog modal-resize" y se adaptara a tu medida. Saludos
    – Edu Varas
    el 21 may. 2018 a las 20:44
  • Como comenta Fernando Forcen con un "modal-lg" el 24 mar. 2019 a las 4:19

3 respuestas 3

3

Yo creo que cambiandolo a modal-lges justo lo que buscas. Te he puesto el resultado con el ejemplo que has puesto.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="ModalEliminar" class="modal fade in" role="dialog" style="overflow-y: scroll; display: block;" aria-hidden="false">
     <div class="modal-dialog modal-lg">
          <div class="modal-content"> 
               <div class="modal-header">
                    <h4 class="modal-tittle">Eliminar </h4>                </div> 
               <form class="form-horizontal" role="form">
                    <div class="panel-body">
                         <input type="hidden" class="form-control" id="eliminar_id" disabled="" value="4">
                         <div class="form-group col-md-12">
                              ¿Esta seguro de eliminar este item?
                         </div>
                         <div class="form-group col-md-12">
                              <label class="control-label">Código: </label>
                              <div>
                                   <span id="eliminar_codigo">10000</span>
                              </div> 
                         </div> 
                         <div class="form-group col-md-12">
                              <label class="control-label">Nombre: </label>
                              <div>
                                   <span id="eliminar_nombre">Miovit producto que requiere cuidado y esterilización antes de entrar al proceso</span>
                              </div>
                         </div> 
                         <div class="form-group col-md-12">
                              <label class="control-label">Presentación: </label>
                              <div>
                                   <span id="eliminar_presentacion">Jarabe<br>155 gg</span>
                              </div> 
                         </div>
                         <div class="form-group col-md-12">
                              <label class="control-label">Área Productiva:</label>
                              <div>
                                   <span id="eliminar_linea_de_produccion">ASDF6546546546SADF541652SDF1651654165SDFSADF4641452451</span>
                              </div>
                         </div>
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">
	<span class="fa fa-remove"></span>  
	<span class="hidden-xs"> Cerrar</span> 
</button>                          <button type="button" id="Eliminar" class="btn btn-primary">
    <span class="fa fa-trash"></span> 
	<span class="hidden-xs"> Eliminar</span> 
</button>                    </div>
               </form>
          </div>
     </div>
</div>

2

Una posible solución sería añadirle la propiedad float:left; al selector .modal-content.

(revisa el snippet siguiente a página completa)

jQuery('#ModalEliminar').on('shown.bs.modal',function() {
   var anchoCSS = 300,
       anchoEfectivo = jQuery(this).find('.modal-content').outerWidth(),
       margenIzquierdo=(300-anchoEfectivo)/2;
       
   jQuery(this).find('.modal-content').css('margin-left',margenIzquierdo);
   
});
.modal-content {
  float:left;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#ModalEliminar" >Open modal</button>
 

<div class="modal fade" id="ModalEliminar" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog modal-sm">
          <div class="modal-content"> 
               <div class="modal-header">
                    <h4 class="modal-tittle">Eliminar </h4>                </div> 
               <form class="form-horizontal" role="form">
                    <div class="panel-body">
                         <input type="hidden" class="form-control" id="eliminar_id" disabled="" value="4">
                         <div class="form-group col-md-12">
                              ¿Esta seguro de eliminar este item?
                         </div>
                         
                         <div class="form-group col-md-12">
                              <label class="control-label">Área Productiva:</label>
                              <div>
                                   <span id="eliminar_linea_de_produccion">ASDF6546546546SADF541652SDF1651654165SDFSADF4641452451</span>
                              </div>
                         </div>
                    </div>
                    <div class="modal-footer">
                         <button type="button" class="btn btn-default" data-dismiss="modal">
	<span class="fa fa-remove"></span>  
	<span  > Cerrar</span> 
</button>                          <button type="button" id="Eliminar" class="btn btn-primary">
    <span class="fa fa-trash"></span> 
	<span > Eliminar</span> 
</button>                    </div>
               </form>
          </div>
     </div>
</div>

Notarás que el modal queda des-centrado, porque modal-sm tiene un ancho de 300px en duro en la hoja de estilos. La única manera de compensar esto que se me ocurre sería usando JS para obtener el ancho efectivo, restarle 300px y darle al modal un margin-left equivalente a la mitad de esa diferencia.

Pero todo depende de cómo abras tu modal. Si no usas JS sino sólo html para ello, ya se vuelve más complicado.

EDIT: Ahí dejé el snipper con la lógica para compensar el nuevo ancho modificando el margin-left. Pof favor ver el snippet en pantalla completa.

3
  • yo utilizo js para abrir el modal
    – bypabloc_
    el 6 mar. 2017 a las 3:44
  • Te dejé el snippet con el cambio para el margen.
    – ffflabs
    el 6 mar. 2017 a las 11:50
  • gracias hermano
    – bypabloc_
    el 6 mar. 2017 a las 15:41
2

En tu caso en particular el problema que tienes es que la cadena de texto del span #eliminar_linea_de_produccion no tiene espacios y por defecto no se ajusta su anchura a la disponible, lo que hace que esta sobresalga del dialogo.

Si lo que quieres es mantener el dialogo con el tamaño estrecho, para este caso en particular puedes hacer que el texto se adapte al ancho disponible utilizando la opción de css word-wrap que partirá las lineas que excedan del ancho aunque no tengan espacios:

#eliminar_linea_de_produccion {
  word-wrap: break-word;

}

Otra opción puede ser que aparezca una barra de desplazamiento cuando el texto sobresalga modificando el css del contenedor del span #eliminar_linea_de_produccion:

div #padre_de_eliminar_linea_de_produccion {
  overflow-x: scroll;
}

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.