Foolproof way to control row height in an asp:GridView?

Question

I cannot seem to stop my gridview rows from being too tall....from googling, it seems like this is an incredibly common problem, but I just can't seem to resolve it.

<GridView ID="gridComputerApps" DataSourceID="llbComputerApplication" runat="server" AutoGenerateColumns="False" 
            CellPadding="0" CellSpacing="0" style="overflow:hidden"
            GridLines="Horizontal"
            EmptyDataText ="NO APPLICATIONS FOUND FOR THIS COMPUTER."
            DataKeyNames="ComputerID, ApplicationID" RowStyle-Height="0px" RowStyle-BorderWidth="0" RowStyle-VerticalAlign="Top"
            EnableViewState="False">
            <Columns>

I also tried:

Private Sub gridComputerApps_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gridComputerApps.RowDataBound
        e.Row.Height = New Unit(5, UnitType.Pixel)
    End Sub

Is there a totally foolproof way to fix this problem?

Answer 1

Have you tried to set the row height in your css?

Set this style in the CssClass properties for the RowStyle and AlternateRowStyle styles of your GridView:

.smallRow {
  height: 15px;
}

Answer 2

This seems to have fixed the problem....maybe not all is necessary but I am moving on.

table, tr, th, td {height: 5px; line-height:1.0; 
                             margin: 0px 0px 0px 0px; 
                             border:0px 0px 0px 0px; 
                             padding: 1px 1px 1px 1px;
                             padding-top: 0px;
                             padding-right: 0px;
                             padding-bottom: 0px;
                             padding-left: 0px;
                             vertical-align: middle;
                             overflow:hidden;
                             overflow-x:hidden}

One especially important thing to note is the padding-top, padding-left, etc...Firefox and IE interpret padding differently, so it was correct in FF with just: padding: 1px 1px 1px 1px;

But IE seems to ignore that.

Another noteworthy issue is that CSS of course overrides setting the row height in the RowDataBound event, which makes sense.

YET ANOTHER UPDATE: The original CSS above stopped working for me for some unknown reason. I happen to be using Blueprint CSS, which is causing some styles to come down that is messing with my custom stylesheet.

So anyways, I think I finally have it.... 1. Basically, to be safe (maybe only if you a disorganized like me), you have to explicitly set every attribute that could conceivably affect the height. Here is the CSS I am using:

.xGridview tr, th, td, input {height: auto; 
                       line-height:normal; 
                     margin: 0px 0px 0px 0px; 
                     border:0px 0px 0px 0px; 
                     padding: 0px 0px 0px 2px; 
                     padding-top: 0px;
                     padding-right: 0px;
                     padding-bottom: 0px;
                     padding-left: 2px;
                     margin: 0px 0px 0px 0px;
                     margin-bottom: 0px;
                     margin-left: 0px;
                     margin-right: 0px;
                     margin-top: 0px;
                     vertical-align: middle;
                     overflow:hidden;
                     background-color:White}

1. I happened to have a required field validator within my grid; it was rendering as invisible so I didn't notice it until I used Firebug. To make things worse, I think it was rendering itself within a table that was somehow ignoring the CSS of the outer table.

2. I had a RadioButtonList in the grid, which by default renders as a table. This can be changed by setting RepeatLayout="Flow" on the RadioButtonList control which instead causes it to be rendered as a span, much nicer. Note also that I added the element INPUT to the CSS, this is required to set the vertical-align on the labels attached to the radio buttons.

So that seems to have licked it finally.