Question

Code below produces button and icon:

Button and input box are not in same row. Icon is outside button.

How to force dropdown button to be in same line with input box and icon in center of button ?

<form id="Form" class='form-fields'>
<div class='form-field'><label class='form-label' for='Klient0_nimi'><u style='cursor:default' >Klient</u></label><span id='span_Klient0_nimi'><input style='width:100px'  maxlenght='80'  id='Klient0_nimi' name='Klient0_nimi' ></input>
<button type='button' class='form-combobutton' tabindex=-1 ></button>
</span>
</div>

CSS:


.form-fields
{
    padding:10px; 
}

.form-field
{
    display:inline-block;
    margin:2px; 
}


.form-label  
{
    padding-left:5px; 
    padding-right:5px; 
    font-family: Arial, Helvetica, sans-serif;
    font-size:xx-small;
}

.form-combobutton
{
   height: 20px;
   width: 20px;
   margin: 0;
   padding: 0;
   margin-left:-6px ;
}


javascript:

    $("button", newel)
    .button({ icons: { primary: 'ui-icon-triangle-1-s'} });

Update

both answers solve the alignment issue. However button width is very big, width: setting in style is ignored:

How to set proper width?

<form id="Form" class='form-fields'>
<div class='form-field'><label class='form-label' for='Klient0_nimi'><u style='cursor:default' >Klient</u></label><span id='span_Klient0_nimi'>
<input  style='width:100px'  maxlenght='80'  id='Klient0_nimi' name='Klient0_nimi' value='' ></input>
<button class='form-combobutton' tabindex='-1'></button>
<script>$(function() {input_autocomplete($('#span_Klient0_nimi'), 'Klient0_nimi', 'DokG', 'KlientArvel') })</script>
</span>
</div>


javascript:

function input_autocomplete(newel, colName, entity, andmetp) {
    var input = $("input", newel);
    $(newel).parent().css({ display: "inline-block" }).parent().css({ 'padding-bottom': 0 });
    input.autocomplete({
        source: 'GetLookupList'
    }
   )
   .autocomplete('widget').css('font-size', '12px');

  $("button", newel).button({ icons: { primary: 'ui-icon-triangle-1-s' }, text: false });
}


css:


.form-fields
{
    padding:10px; 
}

.form-field
{
    display:inline-block;
    margin:2px; 
}


.form-label  
{
    padding-left:5px; 
    padding-right:5px; 
    font-family: Arial, Helvetica, sans-serif;
    font-size:xx-small;
}

.form-combobutton
{   height: 22px;   
    margin: 0 0 2px;   
    padding: 0;   
    margin-left:-6px ;   
    vertical-align:middle;
    width: 20px;   
    }

Answer 1

You use jQuery UI Button (.button({ icons: { primary: 'ui-icon-triangle-1-s'} });) which add .ui-button CSS class having position: relative. So you should use top CSS property to set position of the botton:

.form-combobutton {
    /* other settings which you need */
    top:7px /* some value which looks good */
}