View Full Version : [CLOSED] Filters header alignment

Sep 16, 2014, 1:57 PM
I have added filters to a grid. If I have sub columns then the filter alignment is not uniform. Is there a way to align the filters at the extreme bottom of the column header so that all filter headers are uniformly aligned? I have attached a screenshot of the same.

Sep 16, 2014, 6:40 PM
Hi @vmehta,

I can suggest a CSS solution adding a Cls for Columns that require custom alignment.

The key point in the example is the Cls="align-to-bottom" setting.


<%@ Page Language="C#" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
if (!X.IsAjaxRequest)
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[]
new object[] { "test", "test" },
new object[] { "test", "test" },
new object[] { "test", "test" }

<!DOCTYPE html>

<head runat="server">
<title>Ext.NET v2 Example</title>

.align-to-bottom .x-grid-header-widgets {
margin-top: 22px;
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="GridPanel1" runat="server">
<ext:Store runat="server">
<ext:Model runat="server">
<ext:ModelField Name="test1" />
<ext:ModelField Name="test2" />
<ColumnModel runat="server">
Text="Test 1"
Cls="align-to-bottom" />

<ext:Column runat="server">
<ext:Column runat="server" Text="Test 1" DataIndex="test1">
<ext:TextField runat="server" />
<ext:Column runat="server" Text="Test 2" DataIndex="test2">
<ext:TextField runat="server" />
<ext:FilterHeader runat="server" />

Sep 17, 2014, 2:11 PM
It worked. But when I resize the columns then the filter header also aligns differently. Is there a way to make it aligned to the bottom of the header always as fixed.

Sep 17, 2014, 5:21 PM
If I resize a Column with my test case, it stays at the bottom.

Please clarify what is a browser you are testing with?

Could you, please, provide a screencast?

Sep 25, 2014, 8:56 AM
I am using IE9.

Please check the screenshots for reference.

Sep 25, 2014, 1:19 PM
I see the "Column 3" title splits to two lines. It should not happen by default. At least, I cannot reproduce that. I guess you've applied custom CSS to achieve that. Please provide a test case to reproduce that.