1

With the following I can get the width of a select input in pixels. Is it possible to get the width of an option within the select list? Thanks 

$('#mySelect').width();

UPDATE - heres the reason I want this. I need to center text in a select list. I cant do this cross device and browser with css text-align: center; My only option is to use text-indent. As my site has a liquid width and the options are of different lengths, I need to calculate this value dynamically.

So, if I could get the width of the select option text, and also get the width of the container (much easier), then I could calculate what the text-indent should be. Thanks

NimChimpsky's method seems to work fine. Code is here: jQuery - function runs fine when fired on div click, but not on page load

Community
  • 1
  • 1
Evanss
  • 23,390
  • 94
  • 282
  • 505
  • Not trying to second-guess your motives but I'm really curious: Why would you need to do this? – Wesley Murch May 14 '12 at 14:13
  • You should just ask how to center text in a dropdown then! A character count method will be a hack at best unless you're using monospace fonts in the options, as **iiiiiiiiii** and **MMMMMMMMMM** are both 10 characters but very different pixel widths. The actual ` – Wesley Murch May 14 '12 at 14:46
  • @WesleyMurch get the text, put the text in an invisible div, measure the width of div – NimChimpsky May 14 '12 at 14:49
  • @NimChimpsky: That's a good idea, sounds like it would work. @dln: What browser is this for, IE8? Or which platform? `option{text-align:center}` should work for most browsers. – Wesley Murch May 14 '12 at 14:50
  • Major browsers are a plus but the most importnat devices are iPad, iPhone, Android and Blackberry. – Evanss May 14 '12 at 14:55
  • See http://stackoverflow.com/questions/20091481/auto-resizing-the-select-element-according-to-selected-options-width – rogerdpack Apr 21 '17 at 19:12

4 Answers4

2

I made it like this:

  1. make a new <span> object
  2. set text to the one of the option in question
  3. get computed style values relevant for text width from the selected option
  4. set those measured values to the span
  5. append the span to the body
  6. measure the width of that span
  7. remove the span

Remember:
the select's down arrow (triangle) can't be measured. It is part of the browser's chrome. A magic value of about 30 Pixels is reasonable for that. 

var getOptionWidth = function(opt) {
    var styleProps = [
        'font-family',
        'font-kerning',
        'font-size',
        'font-stretch',
        'font-style',
        'font-variant',
        'font-variant-ligatures',
        'font-weight',
        'text-transform',
        'letter-spacing',
        'word-spacing',
        'padding-left',
        'padding-right'
    ];
    var o = $('<span>')
        .text($(opt).text());
    for (var i=0; i < styleProps.length; i++) {
        o.css(styleProps[i], $(opt).css(styleProps[i]));
    }
    o.appendTo('body');
    var w = o.width();
    o.remove();
    return w;
}
yunzen
  • 32,854
  • 11
  • 73
  • 106
0

you can get string length of selected option like so :

 ("#mySelect option:selected").text().length

and for a specific index element (2 here) do this :

$("#mySelect option[value='2']").text().length

Alternatively you could take the selected text, put it in an invisible div, then get the width of that div - using normal jquery width method.

NimChimpsky
  • 46,453
  • 60
  • 198
  • 311
  • If I used your method to get the string length, is there a way to then calculate the pixel width these are/would take up on the screen? – Evanss May 14 '12 at 14:40
  • 4
    cool, accepted answer with minus votes, that must be worth a badge ? – NimChimpsky May 14 '12 at 17:30
0
$('#mySelect > option').width();

This will really return the width of the first option. Use a more selective jQuery selector string to select the appropriate option tag.

Teddy
  • 18,357
  • 2
  • 30
  • 42
  • Aren't all ` – Wesley Murch May 14 '12 at 14:13
  • Yes, but it is kind of like `width:auto;`. I assume this has to do with the wordiest option in the option list. – Teddy May 14 '12 at 14:14
  • @jdln I can get a value in Firefox. What browser are you using? – Teddy May 14 '12 at 14:16
  • 1
    @jdln: Your ` – Wesley Murch May 14 '12 at 14:16
  • Im now getting a pixel results. Its always the same value regardless of what option is selected. This is how Teddy said it would work, but how can I return the selected option? Thanks – Evanss May 14 '12 at 14:19
  • 1
    @jdln: What is it exactly that you really want? You're asking different questions. ` – Wesley Murch May 14 '12 at 14:20
  • @WesleyMurch the value might be different to the text displayed, I think my answer is the most appropriate - even if no one else does :-( – NimChimpsky May 14 '12 at 14:24
  • Ive updated my question explaining why I want this. I was hoping to get the width in pixels of the text on an option of a select list, not the width of the input itself. Thanks – Evanss May 14 '12 at 14:25
  • This always returns 0 in IE8 – Jay Sullivan Aug 16 '13 at 17:09
0

Here's how you can have a variable width html selector tag that expands and contracts only to the width needed of the selected item. I have not tested browser compatibility since it was only necessary for it to work in Safari on iOS8, but I'm sure it's possible.

HTML of the selector

<select id="hack1">
    <option>short option</option>
    <option>loooong looking loooong option</option>
    <option>Longer option but more like the longest</option>
    <option>Medium length selector</option>
</select>

HTML at the bottom

<select id="hackselect">
    <option></option>
</select>

CSS

#hackselect {
    visibility: hidden;
}

jQuery

$('#hack1').change(function(event) {
    $("#hackselect option:first").text($("#hack1 option:selected").text());
    $('#hack1').css('width', $('#hackselect').width() + 6);
});

The + 6 in the last line of code is there because I have custom styles on the select element with 3 padding on each side. When measuring width, it doesn't account for this, so it needs to be hardcoded in.

Phil Salesses
  • 862
  • 1
  • 9
  • 31