How do I adjust the width of a modal to its content?

Question

How do I adjust the width of a modal to its content?

Navigation

#1 by (2 votes)
#2 by (2 votes)
#3 by (2 votes)

3

I have a modal in which I indicate preliminary information to perform these actions, but some data surpass the space of modal . Here is an example of a modal I use.

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

If I know there are other modals as lg and normal. But they cover much more than what I need, or if I used the lg it will be adapted to the content, it is the objective of my question.

NOTE: if I know that there is not a code so exaggeratedly long but there may be other X texts in my web that can exceed the amount of space that there is in the modal.

PS: give "full screen" to observe the modality how it works on my system.

Thank you in advance for helping me.

bootstrap bootstrap-3

asked by Pablo Contreras 03.03.2017 в 05:44

source

3 answers

2

I believe that changing it to modal-lg is just what you are looking for. I have put the result with the example you have put.

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

answered by 03.03.2017 в 09:15

2

In your particular case the problem you have is that the text string of the% span% co does not have spaces and by default its width is not adjusted to the available one, which makes it stand out from the dialog.

If you want to keep the dialogue with the narrow size, for this particular case you can make the text adapt to the available width using the option of% css% co that will split the lines that exceed the width although they do not have Spaces:

#eliminar_linea_de_produccion {
  word-wrap: break-word;

}

Another option may be that a scroll bar appears when the text excels by modifying the css of the span container #eliminar_linea_de_produccion :

div #padre_de_eliminar_linea_de_produccion {
  overflow-x: scroll;
}

answered by 03.03.2017 в 09:39

Doubts about the C ++ standards [closed] Is there a way to distinguish the manual deletion of an object?

score 2 · Accepted Answer

A possible solution would be to add the float:left; property to the .modal-content selector.

(check the next full page snippet)

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>

You'll notice that the modal is de-centered, because modal-sm has a width of 300px on hard in the style sheet. The only way to compensate this that occurs to me would be using JS to obtain the effective width, subtract 300px and give the modal a margin-left equivalent to half that difference.

But everything depends on how you open your modal. If you do not use JS but only html for it, it gets more complicated.

EDIT: There I left the snipper with logic to compensate the new width by modifying the margin-left. Pof please see the snippet in full screen.