0

I have a select tag which has options containing three strings- Some name,a '-' and Description. I want all the name strings to take up the same amount of width in the drop down list like below.

abc    - abchsdklksd
abcdfe - akdskdfsaljdfsklfdjf
sag    - sdalkjdfjfl

But now it is displaying like below.

abc - abcdadskljf
abcdfe - akdskdfsaljdfsklfdjf
sag - sdalkjdfjfl

I am getting all those names and descriptions from a java function(JSP). I used string.format function to pad the names with appropriate spaces but it is of no use since different characters take different amount of width. How can I implement this?

Sachin B. R.
  • 941
  • 4
  • 16
  • 30
  • [This](http://stackoverflow.com/q/15434633/1391249) is the same question with no accepted answer yet. – Tiny Jan 30 '15 at 05:01
  • Try searching in Google using keywords like "*jQuery multi column selectbox*". You will encounter some threads like [this](http://stackoverflow.com/q/4221439/1391249) and [this](http://stackoverflow.com/q/195270/1391249). – Tiny Jan 30 '15 at 05:08
  • @Tiny This was helpfull. I coud'nt find that thread when I searched. Thanks for pointing it. – Sachin B. R. Jan 30 '15 at 10:08

1 Answers1

0

http://jsfiddle.net/kn5ebp87/1/

Does this satisfy your requirement? You can do modification of your own if you want. I am just adding ampersand nbsp; to give the spaces.

var max_len = 0;
$("select option").each(function(){
    var cur = $(this);
    var cur_len = cur.html().indexOf("-");
    if(cur_len > max_len){
        max_len = cur_len;
    }
});
$("select option").each(function(){
    var cur = $(this);   
    var no_of_spaces = max_len - cur.html().indexOf("-");
    var nbsps = "";
    for(var i=0;i<no_of_spaces;i++){
        nbsps = nbsps + "&nbsp;";
    }
    cur.html(cur.html().replace("-",nbsps + " -"));
});
Jason
  • 698
  • 4
  • 12
  • I did somewhat simillar to this but I have used arial font. it is not monospaced so it was consuming different amount of width for different characters (less width to spaces and more to characters). SO it was not coming properly – Sachin B. R. Jan 30 '15 at 10:06
  • If you don't find a solution yet and you are desperate for one. Have your own custom built select or get it from somewhere if it's already available and apply css that does it for you. – Jason Jan 30 '15 at 10:21