Stivan Stivan - 2 months ago 28
CSS Question

Jquery Dialog issue in Internet Explorer 11

I have a jquery dialog that is opened when link is clicked. Inside the dialog I have a drop down menu that exceeds the height of the dialog box. The height should not be changed it is fixed. When the dialog is open I changing the cursor type to "not-allowed" when cursor is outside of the dialog. The problem is the drop down menu comes outside of the dialog and the cursor remains disabled when hovering over options past the dialog box. This ONLY happens in Internet Explorer. It works fine in Firefox and Google Chrome. I will post my code and a jsfiddle below. All advice/help is greatly appreciated, and HAPPY PROGRAMMER DAY EVERYONE!!!! (256th day of each year)

HTML:

<a href="#" id="open_terms" title="Terms">Jquery Dialog</a>
<div id="terms" style="padding:12px">
<p>This is some sample text for the DIALOG</p>
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
</select>
</div>


JQuery:

$(function () {
$('#open_terms').click(function(){
ShowDialog();
});

function ShowDialog() {
//$('#terms').css('visibility', 'block');
$('#terms').dialog({
modal: true,
resizable: false,
width: '500px',
title: 'DIALOG BOX'
});

$('#terms').dialog("widget").next(".ui-widget-overlay").css("cursor", "not-allowed");
};
});


CSS:

#terms {
display:none;
}


http://jsfiddle.net/wgJAE/16/

Answer

This is a known bug in IE11.

This is the bug report:
https://connect.microsoft.com/IE/feedbackdetail/view/963961

You can also check here:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor#Browser_compatibility (note 1 under the table)

You can fix this by changing your select tag to jquery ui's selectmenu:

$(function () {
  $('#open_terms').click(function(){
    ShowDialog();
  });

  function ShowDialog() {
    $('#terms').dialog({
      modal: true,
      resizable: false,
      width: '500px',
      title: 'DIALOG BOX'
    });
    
    $('#terms').find('select').selectmenu()
    $('#terms').dialog("widget").next(".ui-widget-overlay").css("cursor", "not-allowed");
  };
});
#terms {
    display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>

<a href="#" id="open_terms" title="Terms">Jquery Dialog</a>
<div id="terms" style="padding:12px">
  <p>This is some sample text for the DIALOG</p>            
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
  </select>
</div>

Note that selectmenu requires jqueryui >= 1.11