views:

11198

answers:

7

Maybe this is an easy question, maybe not. I have a select box where I hardcode with width. Say 120px.

ABC REALLY LONG TEXT, REALLY LONG TEXT, REALLY LONG TEXT

I want to be able to show the second option so that the user can see the full length of the text.

Like everything else. This works fine in Firefox, but doesn't work with Internet Explorer6.

+2  A: 

If you have the option pre-existing in a fixed-with <select>, and you don't want to change the width programmatically, you could be out of luck unless you get a little creative.

  • You could try and set the title attribute to each option. This is non-standard HTML (if you care for this minor infraction here), but IE (and Firefox as well) will display the entire text in a mouse popup on mouse hover.
  • You could use JavaScript to show the text in some positioned DIV when the user selects something. IMHO this is the not-so-nice way to do it, because it requires JavaScript on to work at all, and it works only after something has been selected - before there is a change in value no events fire for the select box.
  • You don't use a select box at all, but implement it's functionality using other markup and CSS. Not my favorite but I wanted to mention it.

If you are adding a long option later through JavaScript, look here: How to update HTML “select” box dynamically in IE

Tomalak
A: 

Okay, this option is pretty hackish but should work.

$(document).ready( function() {
$('#select').change( function() {
    $('#hiddenDiv').html( $('#select').val() );
    $('#select').width( $('#hiddenDiv').width() );
 }
 }

Which would offcourse require a hidden div.

<div id="hiddenDiv" style="visibility:hidden"></div>

ohh and you will need jQuery

Pim Jager
Why is it that there seems to be no way around jQuery when it comes to JavaScript questions? Adding jQuery to your web site to solve *this* problem is overkill.
Tomalak
mostly because regular javascript pisses me of so much I always use jQuery (like most people who started with PHP and then also started doing javascript)And writing jQuery is much easier and faster (for me it is).
Pim Jager
JavaScript is a beautiful language (unlike PHP, which resides close to the other end of the spectrum), only complex DOM manipulation is annoying. Trivial DOM manipulation is... well, trivial. :-) No need for a full-blown JS framework.
Tomalak
I agree, the question was about standartized Javascript, not about non-standard jQuery. It does not matter how good or bad they are or how much one likes or dislikes them. Will we soon start seeing "just use C" answers to Cobol questions?
buti-oxa
*Cobol* questions? :-D
Tomalak
First, if the questioner doesn't wan't to use the answer, he simply can decide not to use it. Secondly, this is the only complete answer that actually answers the question.And you can quite simply replace all the jQuery in here with standard Javascript. So if you want to, Do so.
Pim Jager
+4  A: 

Hi,

I fixed my problem with the following code:

<div style="width: 180px; overflow: hidden;">
<select style="width: auto;" name="abc" id="10">
<option value="-1">Any</option>
<option value="123">123</option>
</select>
</div>

Hope it helps!

Cheers, Cychan


A: 

Hi all, I improved the cychan's solution, to be like that:

<html>
<head>

<style>
    .wrapper{
     display: inline;
     float: left; 
     width: 180px; 
     overflow: hidden; 
    }
    .selectArrow{
     display: inline;
     float: left;
     width: 17px;
     height: 20px;
     border:1px solid #7f9db9;
     border-left: none;
     background: url('selectArrow.png') no-repeat 1px 1px;
    }
    .selectArrow-mousedown{background: url('selectArrow-mousedown.png') no-repeat 1px 1px;}
    .selectArrow-mouseover{background: url('selectArrow-mouseover.png') no-repeat 1px 1px;}
</style>
<script language="javascript" src="jquery-1.3.2.min.js"></script>

<script language="javascript">
    $(document).ready(function(){
     $('#w1').wrap("<div class='wrapper'></div>");
     $('.wrapper').after("<div class='selectArrow'/>");
     $('.wrapper').find('select').mousedown(function(){
      $(this).parent().next().addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
     }).
     mouseup(function(){
      $(this).parent().next().removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
     }).
     hover(function(){
      $(this).parent().next().addClass('selectArrow-mouseover');
     }, function(){
      $(this).parent().next().removeClass('selectArrow-mouseover');
     });

     $('.selectArrow').click(function(){
      $(this).prev().find('select').focus();
     });

     $('.selectArrow').mousedown(function(){
      $(this).addClass('selectArrow-mousedown').removeClass('selectArrow-mouseover');
     }).
     mouseup(function(){
      $(this).removeClass('selectArrow-mousedown').addClass('selectArrow-mouseover');
     }).
     hover(function(){
      $(this).addClass('selectArrow-mouseover');
     }, function(){
      $(this).removeClass('selectArrow-mouseover');
     });
    });

</script>
</head>
<body>
    <select id="w1">
       <option value="0">AnyAnyAnyAnyAnyAnyAny</option>
       <option value="1">AnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAnyAny</option>
    </select>

</body>
</html>

The PNGs used in css classes are uploaded here...

And you still need JQuery.....

Saeed
A: 

Hi,

I tried your solution Saeed but when i click on the arrow the dropdown dont open. I tried to fix this but i did not find the solution.

Or I will try to populate a ul li instead the select and push the value in a input hidden...

Any other idea ?

Thanks all

A: 

Saeed solution dont open! Bugged Solution

Pnecklou
Don't post this as an "answer", post it as a "comment".
Allen
A: 

A simple solution I used for an existing site in IE (using jQuery, but I can post back with eventListener code if you really don't know JS that well) is the following:

if (jQuery.browser.msie) {
  jQuery('#mySelect').focus(function() {
    jQuery(this).width('auto');
  }).bind('blur change', function() {
    jQuery(this).width('100%');
  });
};

Of course, use a variable (var cWidth = jQuery('#mySelect').width();) to store the previous width, but this is all that was required for ours to work as you'd expect.

Eric