views:

2689

answers:

2

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>
+1  A: 

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.

Neall
Yes, I realise this. I had been using mootools and a ui framework from cnet. The ui framwork did something with an iframe when a dialog was opened. The iframe suppressed the select boxes.
paul
Can you cover up a select box with an iframe? That would be easier than replacing it with a fake select box. Either way it's outside my experience. Good luck!
Neall
+1  A: 

I eventually found a plug-in which helps - bgiframe Strange that it is available as a plug-in. Why isn't it integrated in the main UI?!

Tried it out but, unfortunately, it screws up my dialog! The dialog contents are all shifted left by 30-40 pixels :-( . Next problem...

paul