Jquery UI - Combobox Button Height Issue

Question

We are using a jquery UI autocomplete widget customized to our needs, one can say it is an extension of the combobox widget seen here. jquery combobox widget.

Applying the widget to three select elements on the page, getting a strange issue as shown in the attachment below .

The button height is not the same as input field height.

Targetting the button with dev console fetches same styles for all three buttons :(

Any help would be much appreciated. :)

P.S:And this issue appears at random , sometime for the second element , sometime third.

EDIT :This may be a problem with the custom CSS or jquery Library CSS, cuz i am able to fix it by adding a

    element.style{
          height:33px;
    }

to the anchor tag which server as the button, but i am not sure if that is the right thing to do.

EDIT : The jsfiddle link can be found here

Answer 1

Your fiddle works well if you set:

.custom-combobox-input {
    margin: 0;
    padding: 0.4em;
}

I think it's related oh how Webkit consider decimal em in this situation, but it must be ivestigated more deeply.

From jQuery UI bugs forum:

The combobox is just a demo, it's not a fully complete widget. We won't maintain functionality beyond our demo unless we pull combobox in as an official plugin that we support.

Link: http://bugs.jqueryui.com/ticket/6133

Demo: http://jsfiddle.net/IrvinDominin/WU9v9/