CODEWITHSUNDEEP
htmlgoogle-chromecssdrop-down-menuwidth
Tamilselvan
Tamilselvan

Reputation: 113

Select drop down width - Chrome issue

I would like to control <option> list width of <select> drop down. By default, browser calculates larger text in the <option> and accommodes drop down. It doesn't look good in sites. I had tried the following CSS snippet and found working in FF. 

select{
    width : 120px;
}
select option {
    width : 90px;
}

The only trouble causer is Chrome. Could u let me know if any workarounds.

Demo

Upvotes: 3

Views: 4587

Answers (1)

Tamilselvan
Tamilselvan

Reputation: 113

Googling it didn't turn out for me. I've only script option left out. The following code does the trick..

/* To trim the charaters in the option list */
    var optLen = $('#country option').size();
    //console.log("Total length is :" +optLen);
    for(var i=0; i<optLen; i++){
        var txt = $('#country option').eq(i).text();
        //alert(txt);
        txt = txt.substring(0,20);
        //alert(txt);
        $('#country option').eq(i).text(txt);
    }

Updated Demo

Upvotes: 2

Related Questions