tengo unMenú Jqueryui que es AJAX generado en tiempo de ejecución. Susgenerado HTML es

 <ul id='menu_id'>
   <li>-</li>
   <li>the_system</li>
   <li>the_agenda</li>
 </ul>

El primero<li>-</li> es a propósito un separador de línea. Cualquier otro elemento de la lista contiene una sola palabra (identificador tipo C), como<li>this_little_thing</li>.... La fuente no es monoespaciada. En última instancia, el menú debe usarse para fines de autocompletar "dentro" (en realidad "sobre") algunos<textarea>.

Por supuesto, el Javascript está haciendo algo como

var mymenu=$("#menu_id");
mymenu.menu({
        select: function(ev,ui) {
           console.log("menu selected ev=", ev, " ui=", ui);
        }
});

pero no tengo idea de cómo calcular el ancho casi mínimo de ese menú. Actualmente, ese menú abarca todo el ancho de su contenedor, por lo que es casi tan ancho como la página web. Intenté varias cosas, como:

    var minwidth = 40;
    /// dont work, the el has same width as body
    mymenu.children("li").each(function(ix,el) {
        console.log("ix=", ix, " el=", el, " .firstChild=", el.firstChild);
        var elw = el.firstChild.clientWidth;
        console.log("ix=", ix, " elw=", elw);
        if (minwidth<elw)
           minwidth=elw;
    });

Detalles sangrientos

Mismo contexto que mianterior pregunta: Firefox 38 o 42, Jquery 2.2.0, Jquery-Ui 1.11.4, Linux / Debian / Sid / x86-64, para mi etapa de software libre GPL alphaMonitor MELT; Estoy hablando del commite89f3f807ec .. si eso importa Si eres lo suficientemente valiente como para construirlo y probarlo, ejecuta

  ./monimelt -Drun,web -W localhost.localdomain:8086/ -J 3

luego navegahttp: //localhost.localdomain: 8086 / nanoedit.html y escriba el<textarea> derecho aMando: las tres letrasthey luego presionesimultaneamente Ctrl Space; debería aparecer un menú de finalización, ¡pero es demasiado amplio!

(en la imagen, el menú está en gris, encima delsend command botón cerca del fondo; en miwebroot/nanoedit.js archivo, está construido en funciónmom_cmdkeypress después de la línea 215; elmenu_id La identificación HTML5 es de hechocommandcompletemenu_id y mi variable Javascript esmenuel nomymenu )

Jsfiddle simplificado (MVCE)

Estahttps://jsfiddle.net/bstarynk/2k464q18/ jsfiddle muestra el mismo problema con HTML

 <h2> my menu </h2>
 <div id='mymenudiv_id'>
  <ul id='menu_id'>
    <li>-</li>
    <li>the_system</li>
    <li>the_agenda</li>
  </ul>
 </div>
 <h2  id='width_id'>-</h2>

y javascript:

var mymenu;
$(document).ready(function() {
   mymenu = $("#menu_id");
   var mywidth = 40;
   mymenu.children("li").each(function(ix, el) {
     console.log("menu-children ix=", ix, " el=", el);
     var elw = $(el).width();
     console.log("menu-children ix=",ix, " elw=", elw);
     if (mywidth<elw)
        mywidth = elw;
   });
   $("#width_id").html("mywidth="+mywidth.toFixed(0));
   mymenu.menu({
        select: function(ev, ui) {
          console.log("menu-select ev=", ev, " ui=", ui);
   }
 })
})

y el estándarhttps://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css CSS; en mi navegador muestramywidth=523 lo cual obviamente está mal. también, reemplazandovar elw = $(el).width(); en el JsFiddle convar elw = el.clientWidth; no cambies nada

pregunta más simple

Quizás solo quiero saber cuáles son las configuraciones de CSS3 para tener un<ul> elemento con pequeño alineado verticalmente<li> elementos ymínimo ancho para adaptarse al más ancho<li>, pero no puedo entender eso ... así que le pregunté alCSS3 para hacer un ul delgado que se ajuste a su li pregunta.