Multiplefilters使用floatThead

Question

我创建了一个浮动标头表。浮动头用floatThead实现，工作完美。 该表由MVC-GRID创建，现在显示多个过滤器时存在一个小问题。

当我点击列名时，需要显示有效的过滤器，而不是。 它应该是这样的：

但我有这个：

所以多个过滤器隐藏在我的另一个div下面。任何人都有解决方案/想法来帮助我吗？

我的代码的一个小html概述：

<script type="text/javascript">
    var $table = $('.grid-mvc table');
    $table.floatThead();

</script>

   <div class="grid-mvc" data-lang="@Model.Language" data-gridname="@Model.RenderOptions.GridName" data-selectable="@Model.RenderOptions.Selectable.ToString().ToLower()" data-multiplefilters="@Model.RenderOptions.AllowMultipleFilters.ToString().ToLower()">
        <div class="wrapper" style="height:500px; overflow-y:auto;">
            <div class="grid-wrap">
                <table class="table table-striped grid-table">
                <thead>
                    @RenderGridHeader()
                </thead>
                <tbody>
                    @RenderGridBody()
                </tbody>
            </table>
        </div>

    </div>
 @RenderGridFooter()
</div>

@helper RenderGridBody()
{
    if (!Model.ItemsToDisplay.Any())
    {
        <tr class="grid-empty-text">
            <td colspan="@Model.Columns.Count()">
                @Model.EmptyGridText
            </td>
        </tr>
    }
    else
    {
        foreach (object item in Model.ItemsToDisplay)
        {
            <tr class="grid-row @Model.GetRowCssClasses(item)">
                @foreach (IGridColumn column in Model.Columns)
                {
                    @column.CellRenderer.Render(column, column.GetCell(item))
                }
            </tr>
        }
    }
}
@helper RenderGridHeader()
{
    <tr>
        @foreach (IGridColumn column in Model.Columns)
        {
            @column.HeaderRenderer.Render(column)
        }
    </tr>
}
@helper RenderGridFooter()
{
    <div class="grid-footer">
        @if (Model.RenderOptions.ShowGridItemsCount)
        {
            <div class="grid-itemscount">
                <span class="grid-itemscount-label">@Model.RenderOptions.GridCountDisplayName:</span>
                <span class="grid-itemscount-caption">@Model.ItemsCount</span>
            </div>
        }
        @if (Model.EnablePaging && Model.Pager != null)
        {
            @Html.Partial(Model.Pager.TemplateName, Model.Pager)
        }
    </div>
}

此HTML代码在视图中生成：

<div class="grid-mvc" data-multiplefilters="true" data-selectable="true" data-gridname="" data-lang="en">
    <div class="floatThead-wrapper" style="position: relative; clear: both;">
        <div class="floatThead-container" style="overflow: hidden; padding-left: 0px; padding-right: 0px; position: absolute; margin-top: 0px; top: 0px; z-index: 1001; will-change: transform; transform: translateX(0px) translateY(0px); left: 0px; width: 1218px;" aria-hidden="true">
            <table class="table table-striped grid-table floatThead-table" style="border-collapse: collapse; display: table; margin: 0px; border-bottom-width: 0px; table-layout: fixed; width: 656.568%;">
                    <thead>
                        <tr>
                            <th class="grid-header">
                                <div class="grid-filter clicked" data-widgetdata="null" data-url="?customerId=3" data-type="System.Decimal" data-name="TotalLocalCost" data-filterdata="[]" data-rendered="1">
                                <div class="grid-header-title">
                            </th>
                            <th class="grid-header">
                                <div class="grid-filter" data-widgetdata="null" data-url="?customerId=3" data-type="System.String" data-name="SupplierName" data-filterdata="[]">
                                <div class="grid-header-title">
                            </th>
                        </tr>
                    </thead>
            </table>
        </div>
        <div class="wrapper" style="height:500px; overflow-y:auto;">
    </div>
    <div class="grid-footer"></div>
    <div id="modal-partial"></div>
</div>