This is a migrated thread and some comments may be shown as answers.

Grid header taking up white space for no reason

2 Answers 59 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jerry
Top achievements
Rank 1
Jerry asked on 16 Jan 2014, 01:51 AM
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.

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 16 Jan 2014, 09:47 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jerry
Top achievements
Rank 1
answered on 16 Jan 2014, 09:34 PM
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
Tags
Grid
Asked by
Jerry
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Jerry
Top achievements
Rank 1
Share this question
or