Grid header taking up white space for no reason

[Jerry]

Hi,


I'm having a very strange problem with the telerik grid taking up white space on the page when its not meant to.

It seems like its part of the k-grid-header which is taking up space starting from the content just above it.

As shown on the attached files, i have 2 divs just above the telerik grid, which gets hidden by the grids white space for some reason (seems to be stretching).

However if  i change the formatting and put the grid above the 2 divs, the grid doesnt stretch and the divs show up below it.

Is there any way to stop the grid from stretching from the top of the page and hiding the divs behind it?


I've tried using z-index to make the grid go behind the 2 divs but doing so prevents the grid from being used at all.

I also don't have any styling for the grid.

This is a sample code structure:

<div class="LeftPane HalfwayDivider" style="height: 200px;">
</div>

<div class="RightPane HalfwayDivider" style="height: 200px;">
</div>

    <div id="GridPane">

        @(Html.Kendo().Grid<PurchaseOrderModel>()    
            .Name("POLineGrid")
            .Columns(columns => {
                columns.Bound(p => p.PONumber).Width(70).Filterable(false).Title("PO No");
                columns.Bound(p => p.ProductName).Width(150);
                columns.Bound(p => p.Date).Format("{0:dd/MM/yyyy}").Width(150);
                columns.Bound(p => p.Supplier);
                columns.Bound(p => p.BuCode).Width(56).Title("BU");
                columns.Bound(p => p.DeliveryAddress).Width(150);
                columns.Bound(p => p.ClientName).Width(100).Title("Client User");
                columns.Bound(p => p.RaisedBy).Width(100).Title("Raised By");
                columns.Bound(p => p.TotalAmount).Format("{0:c}").Width(130);
                columns.Bound(p => p.StatusName).Width(70).Title("Status");
            })
            .Sortable()
            .Scrollable()
            .Filterable()
            .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("GetPurchaseOrders", "Home"))
            )
        )

    </div>


Thanks for any help.

[Dimiter Madjarov]

Hi Jerry,


It seems that the float is not cleared after the two div elements. You could take a look at the following article, which discusses the issue in depth.

Please let me know if this was the reason for the problem. If that is not the case, I would like to ask you to send me a sample project, where it is reproducing, so I could assist you further.

Regards,
Dimiter Madjarov
Telerik

[Jerry]

wow, thanks Dimiter, i didn't realise this was the fix!


I was able to fix this issue by doing:

#GridPane
{
    clear: both;
}

Clearing the float attributes.


Thanks again Dimiter