Width of selectMenu in jqueryui.

Width of selectMenu in jqueryui.

Hi,

I use several selectMenu to filter a table. I've item option with image and/or text

I use this code for this :
  1. $("select.TFOlstJquery").TFOiconSelectImg({
  2.             create: function (event, ui) {
  3.                 var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last"); var elem = $(this).children(":first"); var styl = elem.data("style"); var HasTxt = ($.trim(elem.text()).length > 0);
  4.                 if (HasTxt && styl) { $SpanTxt.addClass("TFOselectmenu-textDecalTxt") } else { $SpanTxt.removeClass("TFOselectmenu-textDecalTxt") }
  5.                 if (styl) { $span = $('<span class="' + (HasTxt ? "TFOSizeImgTxtSelected" : "TFOSizeImgOnlySelected") + ' TFOOptlstFiltreImg"> ').appendTo($SpanTxt); $span.attr("style", styl); }
  6.                 if ($(this).hasClass("lstHeader")) { widget.css({ 'width': '' }); widget.addClass("lstHeader") }
  7.             },
  8.             select: function (event, ui) {
  9.                 var widget = $(this).TFOiconSelectImg("widget"); var $SpanTxt = widget.children(":last"); var elem = ui.item.element; var styl = elem.data("style"); var HasTxt = ($.trim(elem.text()).length > 0);
  10.                 if ((HasTxt && styl) || elem.hasClass("FiltreFaux") || elem.hasClass("FiltreVrai")) { $SpanTxt.addClass("TFOselectmenu-textDecalTxt") } else { $SpanTxt.removeClass("TFOselectmenu-textDecalTxt") }
  11.                 if (styl || elem.hasClass("FiltreFaux") || elem.hasClass("FiltreVrai")) {
  12.                     var $span = $('<span class="' + (HasTxt ? "TFOSizeImgTxtSelected" : "TFOSizeImgOnlySelected") + ' TFOOptlstFiltreImg">').appendTo($SpanTxt);
  13.                     if (styl) { $span.attr("style", styl); } else if (elem.hasClass("FiltreFaux")) { $span.addClass("FiltreFaux") } else if (elem.hasClass("FiltreVrai")) { $span.addClass("FiltreVrai") }
  14.                 }
  15.             },
  16.             change: function (event, ui) { if ($(this).hasClass("TFOlstFiltreImg")) { GetRowsTFO(nameW); } }            
  17.         }).TFOiconSelectImg("menuWidget");

It's run. But when I want to minimize the width of my selectMenu, I see in debugger an ul element is generated. and a width is fixed. In result when I click on my list, the options are widther than my selected item list.


If debugging is the art of removing bugs ... then program is the art of creating