PDA

View Full Version : [CLOSED] grid row height



feanor91
Nov 20, 2013, 8:46 AM
Hello is ther a way to manage row height into a grid?

I ask that because something has changed between 2.2 and 2.3 version and now in 2.3 row height is a little greater than before a few pixels but it is sufficient for I have a bad comment from users, so I want to reduce that height to render my grids as in version 2.2.

Here what I try in CSS :



.x-grid-custom .x-grid-row TD {
font : 12px/16px arial,sans-serif;
height : 30px !important;
}

I try to put it to 30 to see if something change but nothing. I try different values for same results.

I use no padding or border value in grid or column definition. I think it is something related to CSS because I try "Simple Array Grid - Ext.NET Examples" and change the ext version to apply and row height are the same

Daniil
Nov 20, 2013, 12:49 PM
Hi @feanor91,

Please try this:

.x-grid-custom .x-grid-cell-inner {
line-height: 30px;
}

13px by default.

feanor91
Nov 20, 2013, 3:23 PM
It works.

Do you know what is the default value?

EDIT:
I talk to quickly...It works to make row height greater but not smaller, I think the minimum height must be computed on something based on police size or something like that

Baidaly
Nov 20, 2013, 10:29 PM
Hello!


It works.

Do you know what is the default value?

EDIT:
I talk to quickly...It works to make row height greater but not smaller, I think the minimum height must be computed on something based on police size or something like that

The default value is 13px. About make it smaller, I tried with the following sample and it works:


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

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = this.Data;
this.Store1.DataBind();
}
}

private object[] Data
{
get
{
return new object[]
{
new object[] { "3m Co", 71.72, 0.02, 0.03, "9/1 12:00am" },
new object[] { "Alcoa Inc", 29.01, 0.42, 1.47, "9/1 12:00am" },
new object[] { "Altria Group Inc", 83.81, 0.28, 0.34, "9/1 12:00am" },
new object[] { "American Express Company", 52.55, 0.01, 0.02, "9/1 12:00am" },
new object[] { "American International Group, Inc.", 64.13, 0.31, 0.49, "9/1 12:00am" },
new object[] { "AT&T Inc.", 31.61, -0.48, -1.54, "9/1 12:00am" },
new object[] { "Boeing Co.", 75.43, 0.53, 0.71, "9/1 12:00am" }
};
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<style>
.x-grid-custom .x-grid-cell-inner {
line-height: 10px;
}
</style>
</head>
<body>
<ext:ResourceManager runat="server" />

<h1>Simple Array Grid</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="Array Grid"
Width="600"
Cls="x-grid-custom"
Height="350">
<Store>
<ext:Store ID="Store1" runat="server" SortOnLoad="true">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="company" />
<ext:ModelField Name="price" Type="Float" />
<ext:ModelField Name="change" Type="Float" />
<ext:ModelField Name="pctChange" Type="Float" />
<ext:ModelField Name="lastChange" Type="Date" DateFormat="M/d hh:mmtt" />
</Fields>
</ext:Model>
</Model>
<Sorters>
<ext:DataSorter Direction="DESC" Property="company" />
</Sorters>
</ext:Store>
</Store>
<ColumnModel>
<Columns>
<ext:Column runat="server" Text="Company" DataIndex="company" Flex="1" />
<ext:Column runat="server" Text="Price" DataIndex="price">
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="change">
</ext:Column>
<ext:Column runat="server" Text="Change" DataIndex="pctChange">
</ext:Column>
<ext:DateColumn runat="server" Text="Last Updated" DataIndex="lastChange" />
</Columns>
</ColumnModel>
</ext:GridPanel>
</body>
</html>

feanor91
Nov 21, 2013, 12:16 PM
I manage to have line height modification, in fact I have some conflicted values in my css file like that:


.x-grid-custom .x-grid-row TD {
font : 12px/16px arial,sans-serif;
}

changing the "16px" help a lot :)