title: Can't use select input x-editable on jQueryUI Dialog with Firefox
body: <p>I have a x-editable select input on a jQueryUI dialog.  When clicked, however, it doesn't allow it to be changed when rendered with Firefox (yet works with Chrome and IE).  If you close the dialog, I have another one not on a dialog, and it works perfect.  I am thinking it might be CSS z-access related, but am not sure.  How can I use a select input x-editable on a jQueryUI Dialog with Firefox?</p>
  
  <p><a href="http://jsbin.com/wesategigu/edit?html,output" rel="nofollow">http://jsbin.com/wesategigu/edit?html,output</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;title&gt;Testing&lt;/title&gt;  
          &lt;link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/ui-lightness/jquery-ui.css" type="text/css" rel="stylesheet" /&gt;
          &lt;link href="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/css/jqueryui-editable.css" type="text/css" rel="stylesheet" /&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="//cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.1/jqueryui-editable/js/jqueryui-editable.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt; 
              $(function(){
                  $("#dialog").dialog({
                      modal       : true,
                      open        : function() {
                          $('#status').editable({
                              value: 2,    
                              source: [
                                  {value: 1, text: 'Active'},
                                  {value: 2, text: 'Blocked'},
                                  {value: 3, text: 'Deleted'}
                              ]
                          });
                      }
                  });
                  $('#status2').editable({
                      value: 2,    
                      source: [
                          {value: 1, text: 'Active'},
                          {value: 2, text: 'Blocked'},
                          {value: 3, text: 'Deleted'}
                      ]
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div id="dialog"&gt;
              &lt;a href="#" id="status" data-type="select" data-pk="1" data-url="/post" data-title="Select status"&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;a href="#" id="status2" data-type="select" data-pk="1" data-url="/post" data-title="Select status"&gt;&lt;/a&gt;
      &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>