Input width calculation is wrong, if custom font is used.

[bkonetzny]

We have a custom font which is loaded via css @font-family. When the input width calculation is done by creating a dummy element in the body DOM containing the text of the input, the font-family for calculation is "serif" as our custom font is not loaded yet by the browser. As the font is different, the initial input is too short to show all the placeholder text to the user as the text is shown in the then loaded font.

We need to find a way to defer calculation of the input until the font is loaded or recalculate when the font on the input is changed. Any ideas about this?

[locux]

I think we're having a similar issue. Our font is "Arial, Helvetica, sans-serif;" @ 12px, but on longer option values the ends always get cut off. Changing the font doesn't seem to help. I've attempted adding margin-right to every option in the css stylesheet, and none have any effect either.

The only solution that works thus far is appending "      " to the end of every option. It feels really messy though.

Of note, IE displays everything fine, this is a problem only in Chrome/FF. Of course IE has it's own problems (can't scroll - bug #182 )

[locux]

Possibly related to this issue, I noticed that when we adjust the CSS to allow the width to auto-size to the content in IE10+ the scroll bar (when clicked) will often jog to the left the width of the scrollbar. Feels very glitchy. Only happens in IE10+. IE9 will cut-off the right side of the select options. The fix proposed below seems to also fix this reported issue simultaneously.

This was fixed in 0.8.5 with the following diff. (lines might be very slightly off as my source diff has patch already committed from bug #182.

17c17
<
---
>         var widthcount = 0;
1545a1551,1557
>                     if (widthcount == 0) {
>                         self.$dropdown_content.css({
>                             width: self.$dropdown_content.width() + 15
>                         });
>
>                         widthcount = 1;
>                     }

Here's a fiddle displaying the issue: http://jsfiddle.net/rdX5R/4/
Here's a fiddle with this patch: http://jsfiddle.net/rdX5R/5/

I'd appreciate it if brianreavis would look this over, make sure it's solid, and apply to a future release. Thanks!

[mikebronner]

Just ran into this issue as well.

[notflip]

Same issue here

[Henriquehgb]

in this code:

/**

• Restores input visibility.
  */

showInput: function() {
this.$control_input.css({opacity: 1, position: 'relative', left: 0});
this.isInputHidden = false;
},

I changed to:

/**

• Restores input visibility.
  */

showInput: function () {

var $control = this.$control;
var offset = this.settings.dropdownParent === 'body' ? $control.offset() : $control.position();
offset.top = 0;
if ($($control).find('div').text().length > 0)
offset.top -= 20;
offset.left += ($($control).find('div').width());

this.$control_input.css({ opacity: 1, position: 'relative', left: offset.left, top:offset.top });
this.isInputHidden = false;
},

Work for me.

[marcusmolchany]

i think this may be a similar issue #851

[risadams]

closing stale issues older than one year.
If this issue was closed in error please message the maintainers.
All issues must include a proper title, description, and examples.