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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
rhencullenCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.