[Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Gridview Rows too much height

Posted on 2006-10-26
5
Medium Priority
?
3,800 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 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

868 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