Solved

Gridview Rows too much height

Posted on 2006-10-26
5
3,779 Views
Last Modified: 2007-12-19
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>
0
Comment
Question by:codequest
  • 3
  • 2
5 Comments
 
LVL 6

Expert Comment

by:rhencullen
ID: 17819155
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
 
LVL 2

Author Comment

by:codequest
ID: 17820996
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
 
LVL 6

Accepted Solution

by:
rhencullen earned 500 total points
ID: 17823036
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
 
LVL 2

Author Comment

by:codequest
ID: 17823925
Thanks, that produces a result in the test table.  I'll play with it some more and post back.
0
 
LVL 2

Author Comment

by:codequest
ID: 17824117
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

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

825 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question