jQuery Select Style auto width

Question

I'm using this select style script: http://www.bulgaria-web-developers.com/projects/javascript/selectbox/

Is there a way to make the new selector div width accommodate to the text length? At the moment it must be a defined width in the css.

Same thing for the droplist?

I've tried adjusting the css, but I think it might only be feasible with jquery, but I don't know how to edit the file to make it work.

Any ideas?

score 0 · Answer 1 · answered Oct 30 '12 at 03:59

Here is an implementation that should work for you. http://jsfiddle.net/mq3g4/4/

$("#country_id").selectbox({
    onOpen: function (inst) {
        //there is no onCreated handler, so I have to use this.
        //but if you want you can just fire this somewhere else
        go();
        //console.log("open", inst);
    },
    onClose: function (inst) {
        //console.log("close", inst);
    },
    onChange: function (val, inst) {
        console.log(val);
    },
    effect: "slide"
});

function go(){
    var widestLI = 0;
    //iterate through each LI and get the widest one
    $(".sbOptions > li").each(function(){
        var tmpWidth = $(this).textWidth();
        if (tmpWidth > widestLI) widestLI = tmpWidth;
        console.log(widestLI);
    });
    //now set both these elements to the widest width, plus 20px because of the padding
    $(".sbOptions, .sbHolder").width(widestLI+20);
}

//from http://stackoverflow.com/questions/1582534/calculating-text-width-with-jquery    
//this here gets the width of the html element.                                      
$.fn.textWidth = function(){
    var html_calc = $('<span>' + $(this).html() + '</span>');
    html_calc.css('font-size',$(this).css('font-size')).hide();
    html_calc.prependTo('body');
    var width = html_calc.width();
    html_calc.remove();
    return width;
}

jQuery Select Style auto width

1 Answers1