title: Eric Hynds jQuery UI Multiple Select Widget: Checkbox width is equal to the width of the text for every item
body: <p>I use Eric Hynds' Multiple Select Widget and have an issue with the width of the Checkbox equal to the width of the text. The following is my code:</p>
  
  <p>List of files included</p>
  
  <pre><code>&lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
  &lt;link href="../../Content/themes/redmond/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="../../Content/themes/redmond/ui.jqgrid.css" rel="stylesheet" type="text/css" /&gt;
  &lt;link href="../../Content/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;link href="../../Content/jquery.multiselect.css" rel="stylesheet" type="text/css" /&gt;
  
  &lt;script src="../../Scripts/grid.locale-en.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.jqGrid.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/grid.common.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/grid.formedit.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jqModal.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jqDnR.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script src="../../Scripts/dropmenu.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="../../Scripts/jquery.multiselect.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link href="../../Content/style.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="../../Scripts/Common.js" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>HTML for the control:</p>
  
  <pre><code>&lt;select id="SchemaName" multiple="multiple"&gt;&lt;/select&gt;
  </code></pre>
  
  <p>Code to populate the control. I am using a AJAX call since the data is from a database. I found this code in one of the samples on stackoverflow.</p>
  
  <pre><code>var $SchemaName_multiselect = jQuery('select#SchemaName').multiselect();
  $SchemaName_multiselect.multiselect({ selectedList: 1 });
  
  jQuery.ajax({
      type: "GET",
      url: "/Controller/Action",
      data: "",
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      success: function OnPopulateControl(data, response) {
          if (data.length &gt; 0) {
              jQuery.each(data, function () {
                  jQuery('select#SchemaName').append(jQuery("&lt;option&gt;&lt;/option&gt;").val(this['Value']).html(this['Text']));
              });
          } else {
              jQuery("select#SchemaName").empty().append('&lt;option selected="selected" value="0"&gt;Not available&lt;option&gt;');
          }
          jQuery("select#SchemaName").multiselect('refresh');
  
          jQuery('select#SchemaName').unbind('multiselectclick').bind('multiselectclick', function (event, ui) {
  
              //ToDo: when the selection has changed.
  
              }
  
          });
  
      },
      error: function (data, response) {
          alert('Error: ' + response);
      }
  });
  </code></pre>
  
  <p>The following is the screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/3mkCK.jpg" alt="MultiSelect Issue"></p>