asp.net - Gridview column color doesnt fill entire box -
i have gridview boxes highlighted in green. these boxes should fill entire box, can't seem trash 1px border around edges. i'm using ie7, ff too.
rendered html
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> </title><link href="style/stylesheet.css" rel="stylesheet" type="text/css" /><link href="app_themes/contoso/style.css" type="text/css" rel="stylesheet" /></head> <body> <form name="form1" method="post" action="gridviewcoloring.aspx" id="form1"> <div> <input type="hidden" name="__viewstate" id="__viewstate" value="/wepdwujodiymtgxmzqxzbgbbqh0zxn0r3jpza88kwamaqgcawr6qz5buxeoalr4hjstfyqqkprdwd2icixpenacwdi46w==" /> </div> <div> <div> <table class="csstable" cellspacing="0" rules="all" border="1" id="testgrid" style="border-collapse:collapse;"> <tr> <th scope="col">description</th><th scope="col">serial#</th> </tr><tr style="background-color:yellow;"> <td class="nomargin nopadding" style="font-size:smaller;"> <span id="testgrid_ctl02_descriptionlbl">some desc 1/25/2011 9:51:27 am</span> </td><td style="font-size:smaller;"> <span id="testgrid_ctl02_serialnumberlbl" class="nomargin nopadding maxheightandwidth noborder" style="display:inline-block;height:100%;width:100%;">0</span> </td> </tr><tr style="background-color:yellow;"> <td class="nomargin nopadding" style="font-size:smaller;"> <span id="testgrid_ctl03_descriptionlbl">some desc 1/25/2011 9:51:27 am</span> </td><td style="font-size:smaller;"> <span id="testgrid_ctl03_serialnumberlbl" class="nomargin nopadding maxheightandwidth noborder" style="display:inline-block;background-color:#ccffcc;height:100%;width:100%;">1000</span> </td> </tr><tr style="background-color:yellow;"> <td class="nomargin nopadding" style="font-size:smaller;"> <span id="testgrid_ctl04_descriptionlbl">some desc 1/25/2011 9:51:27 am</span> </td><td style="font-size:smaller;"> <span id="testgrid_ctl04_serialnumberlbl" class="nomargin nopadding maxheightandwidth noborder" style="display:inline-block;background-color:#ccffcc;height:100%;width:100%;">2000</span> </td> </tr> </table> </div> </div> </form> </body> </html> test case
css
body { } .nomargin { margin:0 0 0 0; } .nopadding { padding:0 0 0 0; } .bgcolor { background-color:aqua; } .maxheightandwidth { height:100%; width:100%; } .noborder { border:0px; } asp.net
<%@ page language="c#" autoeventwireup="true" codebehind="gridviewcoloring.aspx.cs" inherits="webapplication1.gridviewcoloring" %> <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <form id="form1" runat="server"> <div> <asp:gridview id="testgrid" runat="server" cssclass="csstable" autogeneratecolumns="false" onrowdatabound="setstatuscolors" > <columns> <asp:templatefield headertext="description" sortexpression="description" itemstyle-cssclass="nomargin nopadding"> <itemtemplate> <asp:label id="descriptionlbl" runat="server" text='<%# bind("description") %>'></asp:label> </itemtemplate> <itemstyle font-size="smaller" /> </asp:templatefield> <asp:templatefield headertext="serial#" sortexpression="serial"> <itemtemplate> <asp:label id="serialnumberlbl" runat="server" text='<%# bind("serial") %>' cssclass="nomargin nopadding maxheightandwidth noborder" height="100%" width="100%"></asp:label> </itemtemplate> <itemstyle font-size="smaller" /> </asp:templatefield> </columns> </asp:gridview> </div> </form> </body> </html> c# backend
using system; using system.collections.generic; using system.linq; using system.web; using system.web.ui; using system.web.ui.webcontrols; using system.data; namespace webapplication1 { public partial class gridviewcoloring : system.web.ui.page { protected void page_load(object sender, eventargs e) { testgrid.datasource = maketable(); testgrid.databind(); } protected void setstatuscolors(object sender, gridviewroweventargs e) { (int = 0; < testgrid.rows.count; i++) { string serialnumber = ((label)testgrid.rows[i].findcontrol("serialnumberlbl")).text; if (serialnumber != "0") { //green highlights ((label)testgrid.rows[i].findcontrol("serialnumberlbl")).backcolor = system.drawing.color.fromargb(204, 255, 204); } testgrid.rows[i].backcolor = system.drawing.color.yellow; } } //mock db private dataset maketable() { var table = new datatable("parenttable"); datacolumn column; datarow row; // create new datacolumn, set datatype, // columnname , add datatable. column = new datacolumn(); column.datatype = system.type.gettype("system.int32"); column.columnname = "serial"; column.readonly = true; // add column datacolumncollection. table.columns.add(column); //// create second column. column = new datacolumn(); column.datatype = system.type.gettype("system.string"); column.columnname = "description"; column.autoincrement = false; column.caption = "description"; column.readonly = false; column.unique = false; // add column table. table.columns.add(column); // instantiate dataset variable. var dataset = new dataset(); // add new datatable dataset. dataset.tables.add(table); // create 3 new datarow objects , add // them datatable (int = 0; <= 2; i++) { row = table.newrow(); row["serial"] = * 1000; row["description"] = "some desc " + datetime.now; table.rows.add(row); } return dataset; } } } update
changed serial# template's itemstyle , fixed problem. have no idea why, tips, able reduce problem down enough try it:
<itemstyle font-size="smaller" cssclass="nomargin nopadding" />
try setting border-collapse: collapse; on csstable css class.
okay able working. took css classes off of first template item , created following css.
table.csstable { border-collapse: collapse; } table.csstable tr td { background: yellow; font-size:smaller; margin: 0; padding: 0; } by way, should able rid of itemstyle font-size css.
Comments
Post a Comment