Excel Filter overflow cut off
Dear Sir or Madam,
the popup filter in the SfGrid is cut off. The basic layout is as follows:
<div class="container-fs">
<div class="row m-0 p-0 max-height-fixed">
<div class="col m-0 p-0">
<SfGrid>
[...]
</SfGrid>
</div>
</div>
</div>
<style>
.container-fs {
width: 100%;
max-width: 1880px;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.max-height-fixed {
height: 790px;
overflow-y: auto;
}
</style>When the screen is FHD the popup opens to the left as it is supposed to do:
But when the screen is larger (e.g. WHQ), the filter pops up to the right and therefore is cut off by the container.
How can I make the filter popup open on the left?
- Share us the exact screen size in which the issue is reproduced.
- Share us the video demo showing the reported problem.
Hi Jeevakanth SP. ,
thank you for your reply. I'm happy to give you some further details.
I created a minimal working example by following the syncfusion documentation using your demo code. I further added excel like filtering as documented here. The code for the demo page is as follows:
@page "/test"
@using Syncfusion.Blazor.Grids
<div class="container-fs">
<div class="row m-0 p-0 max-height-fixed">
<div class="col m-0 p-0">
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings>
<GridColumns>
<GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
<GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
<GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
</div>
</div>
</div>
@code{
public List<Order>
Orders
{ get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Range(1, 75).Select(x => new Order()
{
OrderID = 1000 + x,
CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
Freight = 2.1 * x,
OrderDate = DateTime.Now.AddDays(-x),
}).ToList();
}
public class Order
{
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public DateTime? OrderDate { get; set; }
public double? Freight { get; set; }
}
}
Furthermore, I added the css classes as mentioned in my original post in the "site.css"
.container-fs {
width: 100%;
max-width: 1880px;
padding-right: 10px;
padding-left: 10px;
margin-right: auto;
margin-left: auto;
}
.max-height-fixed {
height: 200px; /*Changed to 200 instead of 700 for demo*/
overflow-y: auto;
}
Then I opened the demo page on my 2560 x 1440 monitor. The result was that the container had a size of 1880x200 and the main body had a width of 2310px (see screenshots below). Opening the filter of the "Freight" column and then hovering on the number filter, resulted in the over flow. If you need any further information please let me know!
Best regards,
Jens
Hey Jeevakanth,
thanks for the reply.
I'm trying to combine scrolling with paging. The problem is, that leads to the undesired behaviour that the grid has an empty space, when not enough rows are displaced.
What I want is give the a max-height to which it can expand. If the rows do not need that space, the footer moves up.
Problem:
