0

Sorry for the brief title, I wasn't sure how to word this. Basically I am looking for some help to create (or the source code to an existing control) that will produce and picklist as shown in the image below.

http://img807.imageshack.us/i/picklistcontrol.png/

It needs to display the full length value once clicked but otherwise it should have a truncated value. This needs to be in classic asp or javascript/jquery.

Any help would be greatly appreciated.

EDIT:

Sorry but I didn't realise this would be a problem but the solution must work in IE7 and greater.

Joel Coehoorn
  • 399,467
  • 113
  • 570
  • 794
Ash Burlaczenko
  • 24,778
  • 15
  • 68
  • 99

1 Answers1

0

This can be achieved using just basic HTML and CSS:

fiddle http://jsfiddle.net/garreh/kFH3u/

<style type="text/css">
   select { width: 100px; }
</style>

<select name="test">
    <option>Here is some text.</option>
    <option>Here is some more text.</option>
    <option>And some more text.</option>
    <option>This is another sentence.</option>
    <option>This is a slightly longer sentence.</option>
</select>

IE always has to be "special" ;-)

Anyway, take a look here: Taming the select


(source: icant.co.uk)

There is also a good stackoverflow answers in this post here: Select dropdown with fixed width cutting off content in IE

Community
  • 1
  • 1
Gary Green
  • 22,045
  • 6
  • 49
  • 75
  • Sorry, I guess I've not explained this very clearly. Your solution would so the full word in the picklist before it is clicked were it should display "pineap..." or whatever the max length specified is. When the picklist is click then it should display the full values. Hope this is clearer. – Ash Burlaczenko Apr 19 '11 at 12:55
  • Basic HTML AND css then. Thank you. Will mark this as the answer when it lets me. – Ash Burlaczenko Apr 19 '11 at 12:59
  • I've updated the code and provided a fiddle. Just set the size on the select element and by default when the select is clicked it will always displays the values in full. – Gary Green Apr 19 '11 at 13:00
  • This still doesn't work. See this image, http://img859.imageshack.us/i/001yg.png/. I should have mentioned this must work in IE. – Ash Burlaczenko Apr 19 '11 at 13:51