OK, After reading around for a bit, I can use
To set the height of my rows.
However, they are still way too tall for my needs.
It looks as though the text / checkboxes are being padded both top and bottom.
Is there any way to force the rows so they will be shorter?
By the way, the height=50 is just there as a test to see if it works on every other row. I'll make them both the same once I find a way to make them short.
<AlternatingItemStyle BackColor="#CCFFCC" Height="1px" Font-Size="XX-Small" ForeColor="#339933" /> |
<ItemStyle Height="50px" /> |
To set the height of my rows.
However, they are still way too tall for my needs.
It looks as though the text / checkboxes are being padded both top and bottom.
Is there any way to force the rows so they will be shorter?
By the way, the height=50 is just there as a test to see if it works on every other row. I'll make them both the same once I find a way to make them short.
11 Answers, 1 is accepted
0
Hi Bob,
Here is an example with RadGrid rows being high 50px and 1px. When setting too small heights for table cells, you should be aware that if the content inside is taller, table cells always expand, unless you place a container with overflow:hidden style inside.
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Here is an example with RadGrid rows being high 50px and 1px. When setting too small heights for table cells, you should be aware that if the content inside is taller, table cells always expand, unless you place a container with overflow:hidden style inside.
<%@ Page Language="C#" %> |
<%@ Import Namespace="System.Data" %> |
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
<script runat="server"> |
protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) |
{ |
DataTable dt = new DataTable(); |
DataRow dr; |
int colsNum = 4; |
int rowsNum = 10; |
string colName = "Column"; |
for (int j = 1; j <= colsNum; j++) |
{ |
dt.Columns.Add(String.Format("{0}{1}", colName, j)); |
} |
for (int i = 1; i <= rowsNum; i++) |
{ |
dr = dt.NewRow(); |
for (int k = 1; k <= colsNum; k++) |
{ |
dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i); |
} |
dt.Rows.Add(dr); |
} |
(sender as RadGrid).DataSource = dt; |
} |
</script> |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head runat="server"> |
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> |
<title>RadControls for ASP.NET AJAX</title> |
<style type="text/css"> |
.RadGrid tr.Row50 |
{ |
background:yellow; |
} |
.RadGrid .Row50 td |
{ |
padding-top:0; |
padding-bottom:0; |
height:50px; |
vertical-align:middle; |
} |
.RadGrid tr.Row1 |
{ |
background:blue; |
} |
.RadGrid .Row1 td |
{ |
padding-top:0; |
padding-bottom:0; |
height:1px; |
font:1px/1px sans-serif; |
} |
</style> |
</head> |
<body> |
<form id="form1" runat="server"> |
<asp:ScriptManager ID="ScriptManager1" runat="server" /> |
<telerik:RadGrid |
ID="RadGrid1" |
runat="server" |
OnNeedDataSource="RadGrid_NeedDataSource"> |
<MasterTableView> |
<ItemStyle CssClass="Row50" /> |
<AlternatingItemStyle CssClass="Row1" /> |
</MasterTableView> |
</telerik:RadGrid> |
</form> |
</body> |
</html> |
Best wishes,
Dimo
the Telerik team
Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Augusto Cosatti
Top achievements
Rank 1
answered on 30 Sep 2009, 06:39 AM
Hello.
The solution provided works fine but it doesn't allow the text to be wrapped when the text is larger than the column width. I simply removed the "height" property in the td style and left the "padding-top" and "padding-bottom" to 0px. It does the job as expected.
Thanks for you help
Augusto
The solution provided works fine but it doesn't allow the text to be wrapped when the text is larger than the column width. I simply removed the "height" property in the td style and left the "padding-top" and "padding-bottom" to 0px. It does the job as expected.
Thanks for you help
Augusto
0
Augusto Cosatti
Top achievements
Rank 1
answered on 30 Sep 2009, 07:01 AM
Hello.
I have a problem when I'm moving the row style definition from the ASP page (<style> section) to the CSS file (referenced from a master page).
The style is not applied to the grid rows.
Is there a difference in the style declaration when it's declared in the ASP page and in a CSS file ?
Do you have an idea ?
Thanks
Regards
Augusto
I have a problem when I'm moving the row style definition from the ASP page (<style> section) to the CSS file (referenced from a master page).
The style is not applied to the grid rows.
Is there a difference in the style declaration when it's declared in the ASP page and in a CSS file ?
Do you have an idea ?
Thanks
Regards
Augusto
0
Hi Augusto,
There is no difference where the CSS styles are defined, given that the specificity of the CSS selectors is high enough to override the embedded skin (and it is high enough, otherwise the styles would not work on the page either).
Please check whether the CSS file is registered on the page and whether all the CSS code inside is valid.
If you need further assistance, please send us a simple runnable project in a formal support ticket.
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
There is no difference where the CSS styles are defined, given that the specificity of the CSS selectors is high enough to override the embedded skin (and it is high enough, otherwise the styles would not work on the page either).
Please check whether the CSS file is registered on the page and whether all the CSS code inside is valid.
If you need further assistance, please send us a simple runnable project in a formal support ticket.
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Augusto Cosatti
Top achievements
Rank 1
answered on 30 Sep 2009, 01:39 PM
Hi Dimo.
Actually if I put the declaration of the CSS file in the master page, it does not work. But the CSS file is recognized because the application works fine.
Here is the link reference:
I have to repeat the above line in the child page within the content placeholder.
What do you think ?
Regards
Augusto
Actually if I put the declaration of the CSS file in the master page, it does not work. But the CSS file is recognized because the application works fine.
Here is the link reference:
<
link href="../Style/Style.css" type="text/css" rel="stylesheet" />
I have to repeat the above line in the child page within the content placeholder.
What do you think ?
Regards
Augusto
0
Hello Augusto,
Is the CSS file registered on the page, when you have a <link> tag only in the MasterPage? If yes, then the problem is probably caused by low CSS specificity.
Please send us a simple runnable project, so that we can see what happens exactly and explain.
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Is the CSS file registered on the page, when you have a <link> tag only in the MasterPage? If yes, then the problem is probably caused by low CSS specificity.
Please send us a simple runnable project, so that we can see what happens exactly and explain.
Best wishes,
Dimo
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Augusto Cosatti
Top achievements
Rank 1
answered on 30 Sep 2009, 01:57 PM
Dimo,
Unfortunately the project is a big project and I can't send it to you.
I will prepare a small project with the same architecture (master/child) and I will send it to you.
Thanks and regards
Augusto
Unfortunately the project is a big project and I can't send it to you.
I will prepare a small project with the same architecture (master/child) and I will send it to you.
Thanks and regards
Augusto
0
Augusto Cosatti
Top achievements
Rank 1
answered on 07 Oct 2009, 11:03 AM
Hi Dimo.
I have prepared a sample project but I can't attach the zip file. How can I send you the file ?
Thanks
Regards
Augusto
I have prepared a sample project but I can't attach the zip file. How can I send you the file ?
Thanks
Regards
Augusto
0
Hello Augusto,
You can start regular support ticket from your account and submit the project in it. Thus we will examine it locally and will get around to you with our findings.
Kind regards,
Dimo,
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
You can start regular support ticket from your account and submit the project in it. Thus we will examine it locally and will get around to you with our findings.
Kind regards,
Dimo,
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
0
Albert
Top achievements
Rank 1
answered on 30 Aug 2010, 04:53 PM
Hello, I'm experiencing the same problem. If the css style is defined on the page level, it is applied, but doesn't get applied if it's defined in outside css file. Could you please post the solution?
Thank you.
Thank you.
0
Hello Albert,
The solution is to use higher CSS specificity. As this is an important CSS knowledge, I recommend you to read
http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx
For example:
div.RadGrid tr.Row50
{
background:yellow;
}
div.RadGrid tr.Row50 td
{
padding-top:0;
padding-bottom:0;
height:50px;
vertical-align:middle;
}
div.RadGrid tr.Row1
{
background:blue;
}
div.RadGrid tr.Row1 td
{
padding-top:0;
padding-bottom:0;
height:1px;
font:1px/1px sans-serif;
}
Kind regards,
Dimo
the Telerik team
The solution is to use higher CSS specificity. As this is an important CSS knowledge, I recommend you to read
http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx
For example:
div.RadGrid tr.Row50
{
background:yellow;
}
div.RadGrid tr.Row50 td
{
padding-top:0;
padding-bottom:0;
height:50px;
vertical-align:middle;
}
div.RadGrid tr.Row1
{
background:blue;
}
div.RadGrid tr.Row1 td
{
padding-top:0;
padding-bottom:0;
height:1px;
font:1px/1px sans-serif;
}
Kind regards,
Dimo
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items