Home / Questions / 52785
Accepted
bypabloc_
Asked: 2020-03-03 11:50:35 +0800 CST 2020-03-03 11:50:35 +0800 CST

How do I adapt the size of the bootstrap popover to the size of the content?

  • 772

I have information stored in a popoverand I want it to adapt to the content it has, but I can't find how. Here the example:

$( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
<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="prueba"></div>

NOTE: I know

mixeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee
It is not a word that they will insert but you never know if the user will use a long word and to avoid future problems I want him to popoveradapt to the content.

PS: thanks in advance to anyone who can give me their help and their time :D

javascript

2 Answers

  1. Best Answer

    Overwrite the max-widthof .popover:

    $( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
    .popover {
  max-width: 90% !important;
}
    <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="prueba"></div>

    • 3

  2. The maximum width of the bootstrap popover defaults to 276px in the stylesheet.

    If you override the style to have max-width:100%it, it can occupy the entire container.

    .popover {
  max-width: 100% !important;
}

    Now why did I put important? simply because in the demo that follows the bootstrap styles override the fiddle styles. In your case you may not need it.

    $( document ).ready(function() {
   $('#prueba').html(funcion());
   $('[data-toggle="popover"]').popover({
         html : true
   }); 
});
    
    
function funcion(){
        var json = [{
              "id_procesos": 3,
              "p": "Llenado de productos",
              "unidad_teorica": 33333,
              "udm": "ml",
              "velocidad": 120
            },
            {
              "id_procesos": 2,
              "p": "Mezclaaaaaaaaaaa",
              "unidad_teorica": 200,
              "udm": "gg",
              "velocidad": null
            }];
      console.debug(json);

      var procesos = "<table class='table table-hover'><tr><th>Nombre</th><th>Unidad Teórica</th><th>Velocidad</th><th>Tiempo Teórico</th></tr>";
      $( json ).each(function( i, j ) {
          procesos += "<tr>";
              procesos += "<td>"+j.p + "</td>";
              procesos += "<td>"+j.unidad_teorica + " "+j.udm+"</td>";
              if(j.velocidad){
                  procesos += "<td>"+j.velocidad + "<sup>"+ j.udm+" </sup>/<sub>min</sub></td>";
                  procesos += "<td>"+tiempo_teorico(j.unidad_teorica,j.velocidad,'1') +"</td>";
              }else{
                  procesos += "<td></td>";
                  procesos += "<td></td>";
              }
          procesos += "</tr>";
      });
      procesos += "</table>";
      return '<a href="#" data-toggle="popover" title="Procesos" data-content="'+procesos+'">Info</a>';
}
    
    
    function tiempo_teorico(c_u_t, c_v, c_u_m){
        var result = '';
        if(c_v==''){
            return result;
        }else if(c_v==0){
            result = 'La Velocidad del Producto no puede ser igual a 0';
            return result;
        }else if((c_u_t!='') && (c_v!='') && (c_u_m!=null) && (c_u_m!='')){
            var time = Math.floor( (c_u_t/c_v)*60 );  
            var hours = Math.floor( time / 3600 );  
            var minutes = Math.floor( (time % 3600) / 60 );
            var seconds = time % 60;
            //Anteponiendo un 0 a los minutos si son menos de 10 
            minutes = minutes < 10 ? '0' + minutes : minutes;
            //Anteponiendo un 0 a los segundos si son menos de 10 
            seconds = seconds < 10 ? '0' + seconds : seconds;
            result = hours + ":" + minutes + ":" + seconds;  // 2:41:30
            return result;
        }
    }
    .popover {
    max-width: 100% !important;
}
    <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="prueba"></div>

    • 2