Optimizing (almost minimizing) the width of the jqueryui menu

Question

I have a jqueryui menu which is an AJAX generated at runtime. Its generated HTML

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

The first <li>-</li> is the line separator. Ever another list item contains one word (C-like identifier), for example <li>this_little_thing</li> .... The font is not monospaced. The menu should ultimately be used for autocompletion purposes "inside" (actually "above") some <textarea> .

Of course, javascript does something like

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

but I don’t know how to calculate the almost minimum width of this menu. This menu currently covers the entire width of its container, so it is almost as wide as a web page. I tried several things, for example:

  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; }); 

---

Mountain Details

In the same context as my previous question: Firefox 38 or 42, JQuery 2.2.0, Jquery-Ui 1.11.4, Linux / Debian / Sid / x86-64, for my free GPL alpha stage MELT monitor software; I'm talking about fixing e89f3f807ec .. if that matters. If you are brave enough to build it and test it, run

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

then look at http: //localhost.localdomain: 8086 / nanoedit.html and enter the right to the command in the <textarea> field: three letters the , and then press Ctrl Space at the same time; A completion menu should appear, but it's too large!

---

---

^{(in the image the menu is in gray, above the send command button below, in my webroot/nanoedit.js file , it is built in mom_cmdkeypress function after line 215, menu_id id HTML5 is actually commandcompletemenu_id , and my variable is Javascript menuel not mymenu )}

Simplified Jsfiddle (MVCE)

This https://jsfiddle.net/bstarynk/2k464q18/ jsfiddle shows the same problem with 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> 

and 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); } }) }) 

and standard https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css CSS; mywidth=523 displayed in my browser, which is obviously incorrect. In addition, the replacement var elw = $(el).width(); in JsFiddle on var elw = el.clientWidth; nothing changes.

simpler question

Maybe I just need to know which CSS3 settings have an <ul> element with vertically aligned small <li> elements and a minimum width to fit the widest <li> , but I can't figure out what ... so I asked CSS3 to do thin street relevant to this issue .