[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Gridview Rows too much height

Posted on 2006-10-26
5
Medium Priority
?
3,795 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Find out what you should include to make the best professional email signature for your organization.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

649 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