Dom element not aligned with search field

lucacali87

Hi, I would like to add refresh button to my datatable but I have a problem with the position of the button.
I have tried with Custom toolbar elements and with Buttons extension and I have the same problem.
This is part of my code

acquisitionTable = $('#acquisitionsTable').DataTable({
        responsive: true,
        "bLengthChange": false,
            deferRender:    true,
            scrollY:        '70vh',
            scrollCollapse: true,
            scroller:       true,
            dom: 'Bfrtip',
            buttons: [
                {
                    text: 'Refresh<i class="fa fa-refresh"></i>',
                    action: function ( e, dt, node, config ) {
                        alert( 'Button activated' );
                    }
                }
            ],

I have attached the image.

In browser debug I see:
<div class="dt-buttons">
    <a class="dt-button" tabindex="0" aria-controls="acquisitionsTable" href="#">
        <span>Refresh<i class="fa fa-refresh"></i></span>
    </a>
</div>
<div id="acquisitionsTable_filter" class="dataTables_filter">
    <label>Search:<input type="search" class="form-control input-sm" placeholder="" aria-controls="acquisitionsTable">

Do you know what is wrong? The buttons css exist but it doesnt load for the specific element.Thanks