CODEWITHSUNDEEP
javascriptjquery
Ahsan Rathod
Ahsan Rathod

Reputation: 5505

Auto expand <select> tag width on behalf of characters length - Javascript

I want to expand <select> tag width on behalf of characters length in <option> tag.

Currently, I am using this example: http://jsfiddle.net/rathoreahsan/ShgWt/ but defining the hard coded width on base of character count and it works on all new browsers except less then IE 9.

But I want a better solution by using jquery/javascript with auto width instead of hardcoded width on behalf of character count.

Actually I have dynamic drawn list. But I have a fixed width for all dropdowns initially on a webpage which I want to change on base of character length of tag on onchange behavior

Please help.

Thanks in advance.

Upvotes: 0

Views: 1158

Answers (2)

brenjt
brenjt

Reputation: 16297

Wouldn't you be able to accomplish this by not specifying any width in the <select> at all? If I am correct auto expand is a default behavior of non-specified width selects.

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29160

Here you go. This assumes that the div test is using the same font as the select box is. Basically I dump the text into a div, measure the div width, and clear the div. Then I assign that width to the select box.

Working Fiddle: http://jsfiddle.net/Jaybles/ShgWt/5/

HTML

<!--Add right before </body> tag -->
<div id='test'></div>

JS

function countit(what){
    var formcontent = what.form.charcount.value;
    var t = $('#test');
    t.html(formcontent);
    var w = t.width() + 25;
    t.html('');
    $("#selectBox").css ({'width' : w + "px"});
}

CSS

#test{float:right;}
#selectBox{width:80px;}

Upvotes: 2

Related Questions