Gridview Rows too much height

I have a gridview with “too tall” (too much height) rows.   I can’t figure out how to get them down.  

The issue seems to be about 4 pixels of extra space above and below the actual span that has the information.

The rows are dynamically constructed.  The material below is a reduced test case, without the dynamic construction, but the same basic output, which only uses CSS Classes, but it has the too tall rows, too.  

I figure if I can solve this test case I can solve the full code.

Any suggestions on how to get these rows to be shorter in height would be appreciated.

Thanks!

‘==============GRIDVIEW===========================

<asp:GridView ID="TestGV1" runat="server" DataSourceID="GLGVDataSource1" AutoGenerateColumns="False">
      
<RowStyle cssclass= "TestGV1Row"  />
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Panel1" runat="server" cssClass="Prts1">
<asp:Table ID="Table1" runat="server" CssClass="GVT">
<asp:TableRow CssClass = "GVR">
<asp:TableCell CssClass = "GVC">
<asp:Label ID="Label1" runat="server" Text='<%# Bind("PartType") %>'></asp:Label>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

‘=============  CSS CLASSES ====================

.TestGV1Row
{font-size:8px;height:8px;padding-top:-2px;padding-bottom:-2px}

.Prts1 {width:460px;height:10px;padding-top:-4px;padding-bottom:-4px;}

.GVT
{ height:12px
}

.GVR
{ height:12px
}

.GVC
{ height:12px
}


‘====OUTPUT HTML From top of Gridview to end of first row panel  ==


<TABLE id=TestGV1 style="BORDER-COLLAPSE: collapse" cellSpacing=0 rules=all border=1>
<TBODY>
<TR>
<TH scope=col>&nbsp;</TH></TR>
<TR class=TestGV1Row>
<TD>

<DIV class=Prts1 id=TestGV1_ctl02_Panel1>

<TABLE class=GVT id=TestGV1_ctl02_Table1 border=0>
<TBODY>
<TR class=GVR>
<TD class=GVC>

<SPAN id=TestGV1_ctl02_Label1>CLMN</SPAN>

</TD>
</TR>
</TBODY>
</TABLE>
</DIV>
LVL 2
codequestAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
rhencullenConnect With a Mentor Commented:
What's possibly happening is that your inner table will (be default) have a couple of pixels of spacing and padding between cells, which might bve causing the problem.

Try re-enabling your inner table again, but extending the table tag to <TABLE class="GVT" id="TestGV1_ctl02_Table1" border="0" cellpadding="0" cellspacing="0">

And see what happens then....

If that works, then you could try adding a new tag to your css, something like:

.Prts1  table
{  padding: 0;
   border: 0;
}

Which would disable padding and borders on your inner table - but try the cellpadding/cellspacing first to see if that's the problem.


Paul
0
 
rhencullenCommented:
You're defining a RowStyle of TestGV1Row which has a font-height of 8px and top/bottom padding of -2px, but then you're using GVR and GVC classes on the TableRow and TableCells, both of which have a 12px height.

How high do you want the rows to be ?  Are you aiming to have them 12px but they're ending up as 16px, or are you wanting them to be 8px but they're ending up as 12px ?

What happens if you define cellpadding and cellspacing on the GridView ?

I've found in the past that despite setting spacing as required in a stylesheet, some of the Asp.Net controls don't allow everything to be overridden by css styling.  The Calendar control is a prime example, when spacing in between day elements only seems to be controllable by setting a cellpadding/spacing on the control.  The Margin/Padding options applied through stylesheets have little effect, and it maybe that the GridView is similar ?.

Paul
0
 
codequestAuthor Commented:
Thanks for the input.  

If I comment out the table within the gridview row, as shown below, the displayed row height gets smaller (looks like the height set by the  "<ItemRowStyle height"  property.)   So perhaps the problem lies in the CSS for the "inner" table...and I've never gotten a good handle on those.

<TABLE id=TestGV1 style="BORDER-COLLAPSE: collapse" cellSpacing=0 rules=all border=1>
<TBODY>
<TR>
<TH scope=col>&nbsp;</TH></TR>
<TR class=TestGV1Row>
<TD>

<DIV class=Prts1 id=TestGV1_ctl02_Panel1>

<%-- <TABLE class=GVT id=TestGV1_ctl02_Table1 border=0>
<TBODY>
<TR class=GVR>
<TD class=GVC> --%>

<SPAN id=TestGV1_ctl02_Label1>CLMN</SPAN>

<%-- </TD>
</TR>
</TBODY>
</TABLE> --%>
</DIV>
0
 
codequestAuthor Commented:
Thanks, that produces a result in the test table.  I'll play with it some more and post back.
0
 
codequestAuthor Commented:
Seems unresponsive in initial trials to CSS, however, in gridview.rowdatabound this produces most of the desired effect.

wrkHT.Attributes.Add("cellspacing", "0px")
wrkHT.Attributes.Add("border", "0px")

This is on the right track so I'm calling this one RESOLVED!   Happy to have my pixels back!

Muchos Gracias!
0
All Courses

From novice to tech pro — start learning today.