I have a web page which contains a select box. When I open a jQuery Dialog it is displayed partly behind the select box.
How should I approach this problem? Should I hide the select box or does jQuery offer some kind of ‘shim’ solution. (I have Googled but didn’t find anything)
Here is some code:
<!DOCTYPE html> <html lang='en'> <head> <title>testJQuery</title> <meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'> <meta name='GENERATOR' content='Rational Application Developer'> <link rel='stylesheet' href='theme/smooth/theme.css' type='text/css' media='screen' /> </head> <body> <a class='pop' href='nix'>Click me</a> <p/> <select size='20'> <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> <option>s jl fjlkdjfldjf l*s ldkjsdlfkjsdl fkdjlfks dfldkfjdfkjlsdkf jdksdjf sd</option> </select> <div id='xyz' class='flora hiddenAsset'> <div id='dialog' title='Edit Link'> <p>Enter the link details:</p> <table width='80%' border='1'> <tr><td>URL</td><td><input id='url' style='width:100%' maxlength='200' value='{url}'/></td></tr> <tr><td>Title</td><td><input id='title' style='width:100%' maxlength='200' value='{title}'/></td></tr> <tr><td>Target</td><td><input id='target' size='20' maxlength='200' value='{target}'/></td></tr> </table> </div> </div> <script type='text/javascript' src='../script/firebug/firebug.js'></script> <script type='text/javascript' src='jquery-1.2.6.js'></script> <script type='text/javascript' src='jquery-ui-1.5.2.js'></script> <script type='text/javascript' src='jqSOAPClient.js'></script> <script type='text/javascript'> (function($){ $(document).ready(function(){ console.debug('ready'); $('.hiddenAsset').hide(); $('a.pop').bind('click', showDialog); console.debug('ready - done'); }); var showDialog = function(){ console.debug('show'); $('#dialog').dialog({ modal: true, overlay: { backgroundColor: '#666', opacity: '.3', filter: 'alpha(opacity=30)' }, width: '400px', height: '300px', buttons: { Ok: function() { $(this).dialog('close'); }, Cancel: function() { $(this).dialog('close'); } } }); console.debug('show-done'); return false; }; })(jQuery); </script> </body> </html>
This doesn’t have anything to do with jQuery in particular. This is a known bug in IE 6 – Windows-native select boxes always appear on top of other elements. The only thing you can do is hide the select boxes when they’re covered up – usually replacing them with something that looks like the select box.