Responsive resize with input search box on top

gpersico

Hi everybody,
I have the following problem: I am using datatables with multi column filtering on top. If you watch the video at this link you can understand the problem:

https://www.dropbox.com/s/0k900m3tyxse756/screencast.mov?dl=0

When I resize the browser window, the input search fields are still visible causing an overflow in the table.
Obviously the datatable ha been initialized via javascript with the responsive option.
Here's the HTML:

<section class="content">
    <div class="container-fluid">
        <div class="block-header">
            <h2>
                VISUALIZZAZIONE OFFERTE ABITATIVE
                <small>Qui potrai visualizzare e ricercare qualsiasi offerta abitativa.</small>
            </h2>
        </div>
        <div class="row clearfix">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="card">
                    <div class="body">
                        {$sizeOffers = count($offers)}
                        {if $sizeOffers gt 0}
                            {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/offers.tpl'}
                        {else}
                            <div class="alert alert-warning">
                                Non c'&egrave; nessuna offerta abitativa da visualizzare. Clicca sul pulsante in basso per inserirne una ora.
                            </div>
                        {/if}
                        <hr>
                        <div class="text-center">
                            <a href="/residentialoffer/add" class="btn btn-primary waves-effect">Aggiugi un'offerta</a>
                            {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/back_button.tpl'}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {include file=$smarty.const.DEFAULT_RESOURCES_PATH|cat:'inc/token_field.tpl'}
    </div>
</section>

As you can see, offers.tpl is an included file and contains:

<table id="{$id|default:'offers-table'}" class="table table-striped table-bordered table-hover dt-responsive">
    <thead>
    <tr>
        <th>Azioni</th>
        <th>Identificativo</th>
        {if !isset($from_contact)}
            <th>Offerente</th>
        {/if}
        <th>Affitto/Vendita</th>
        <th>Comune</th>
        <th>Telefono</th>
        <th>Provenienza</th>
        <th>Tipologia</th>
        <th>Prezzo</th>
    </tr>
    <tr>
        <th>Azioni</th>
        <th>Identificativo</th>
        {if !isset($from_contact)}
            <th>Offerente</th>
        {/if}
        <th>Affitto/Vendita</th>
        <th>Comune</th>
        <th>Telefono</th>
        <th>Provenienza</th>
        <th>Tipologia</th>
        <th>Prezzo</th>
    </tr>
    </thead>
    <tbody>
    ......
    </tbody>
</table>

Can you help me?