0

I read the article Dropdownlist width in IE but unfortunately I couldn’t adapt it to my needs.

I have a select list with some of the options opening URLs in a new window and I use the below jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

The script for linking the options of the select list is the following:

<script type="text/javascript">
  $(document).ready(function() { 
  $('.openSelect').change(function(){ 
    var selectedValue=$(this).val(); 
      if (selectedValue.match(/http/)) { 
       var open = window.open($(this).val(),'_blank'); 
       if (open == null || typeof(open)=='undefined'){ 
       alert("Please turn off pop-up blocker and reload this page to visit:  " + selectedValue); 
       }
 }
});
});
</script>

My problem is that the drop-down menu width is restricted by the table cell’s width in IE6, 7 and 8 so I must somehow fix it to expand to the width of the longest option content. The only restriction is that I have to keep the above script and somehow modify it, not change it altogether.

An example of the select list is given in the following page: http://www.myairlease.com/available/available_for_lease_737

bad_coder
  • 11,289
  • 20
  • 44
  • 72
user2089100
  • 1
  • 1

3 Answers3

0

The problem you have is that IE8 and earlier uses the operating system's built-in drop-box control for HTML select boxes. All other browsers, including IE9 and later render the select box themselves, but IE6/7/8 do not.

This brings a number of quirks and restrictions with it, with the effect you're seeing being one of the most obvious.

The short answer is that there is no way in IE8 and earlier to force the standard select box to display strings that are wider than the select box itself. There are some hacky work-arounds, but they don't really work very well, especially when you're dealing with a table-based layout.

The longer answer is that if you need to do this, then your only option is to use a custom select box control. There are a number of jQuery plugins that override the default select box with their own. There are loads to choose from, and they have various different features, so rather than recommend a specific one, I'll direct you to this site which lists ten of the best. It's a pretty good bet that at least some of them will work the way you need them to.

In general, they're very simple to use, and don't involve any change to your HTML code; just a small bit of extra javascript in your document ready function to activate them.

I hope that helps.

Spudley
  • 166,037
  • 39
  • 233
  • 307
0

Thanks for the help!!

I tried using the LinkSelect plug-in but I’m certainly doing something wrong. http://www.givainc.com/labs/linkselect_jquery_plugin.htm#options

My select tag is the following

<select class="openSelect" style="width:px; color:#0066ff;">

so do I simply load the following in the head:

<script type="text/javascript" src="js/jquery.linkselect.min.js"></script>
<script type="text/javascript" src="js/jquery.bgiframe.js"></script>
<link type="text/css" href="css/jquery.linkselect.css" rel="stylesheet" media="all" />

and change my script to the following??

<script type="text/javascript">
$(document).ready(function() { 
 $('.select.openSelect').openSelect();
  $('.openSelect').change(function(){ 
  var selectedValue=$(this).val(); 
  if (selectedValue.match(/http/)) { 
       var open = window.open($(this).val(),'_blank'); 
       if (open == null || typeof(open)=='undefined'){ 
       alert("Please turn off pop-up blocker and reload this page to visit:  " + selectedValue); 
       }
     }
  });
});
</script>

I tried it and it doesn't work so any idea where my mistake is??

Thanks

user2089100
  • 1
  • 1
0

I had a look at the source code of the page where the plug is described and what they use is totally different to what they give in the instructions.....

Any chance someone could help out on how to proceed??

Thanks

user2089100
  • 1
  • 1