Unnecessary spacing between two images in the same column of datagrid

hrm · May 29, 2004

Hi,

I am placing two images in the same column of the datagrid as shown by
the code given below. When I view this page in the browser, there is
about 3 pixels of space between the images displayed (I am not
expecting any spacing between these images). I want both the images to
be displayed immediately one after the other without any spacing
between them. How can I avoid this spacing? I tried to set the
ItemStyle-Width property on the <asp:TemplateColumn> to the combined
width of the two images (in pixels ) and also set the
ItemStyle-Wrap="false".. ethese parameters still do not get rid of the
space between the two images in the column.

Any pointers will be greatly appreciated.

Thanks in adv,
hrm.

----
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs"
AutoEventWireup="false" Inherits="RndWeb.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema"
content="http://schemas.microsoft.com/intellisense/ie5">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 8px; POSITION:
absolute; TOP: 8px" cellSpacing="0"
cellPadding="0" width="100%" border="0">
<TR>
<TD></TD>
</TR>
<TR>
<TD>
<asp:datagrid id="dgRnd" runat="server" BorderWidth="1px"
CellPadding="0" Width="100%" GridLines="Horizontal"
BorderColor="DarkGray" CellSpacing="0" CssClass="BodyTxt"
AutoGenerateColumns="False">
<ItemStyle Wrap="false" BorderWidth="0px"
BorderStyle="None"></ItemStyle>
<HeaderStyle CssClass="DatagridHeader"
BackColor="DarkGray"></HeaderStyle>
<Columns>
<asp:TemplateColumn ItemStyle-Width="42"
ItemStyle-BackColor="#ffff33" ItemStyle-BorderColor="#ff0099"
ItemStyle-Wrap="false" HeaderText="Name of resource">
<HeaderTemplate>
<b>            Resource
Name</b>
</HeaderTemplate>
<ItemTemplate>
<asp:Image BackColor=#ff3333 ImageUrl='<%#
DataBinder.Eval(Container.DataItem, "TabSpaceImage") %>' Runat=server
ID="Image1"/>
<asp:Image BackColor=#66cc66 ImageUrl='<%#
DataBinder.Eval(Container.DataItem, "NodeStateImage") %>' Runat=server
ID="Image2"/>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>
</TD>
</TR>
<TR>
<TD></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
----------------------

Eliyahu Goldin · May 30, 2004

Make a table with one row and two cells. Put the left image in the left cell
and the right image in the right cell. Set align=right for the left cell and
align=left for the right cell. Set appropriate borders, paddings and margins
to 0.

Eliyahu

ram mohan · May 30, 2004

Hi,

Thanks for the reply.. but this does not seem to answer my question.

I am not interested in using 'Table' since I want to use some features
(which make coding less!) of the DataGrid. If I want to use a table the
following code works perfectly by placing two images in the same cell
without any gap between them.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td><img src="file:///X:\Design Time\Working\Source\Web
Editor\QRDotNetWebEditor\images\AccessVersion\minus_icon.gif"
border="0"><img src="file:///X:\Design Time\Working\Source\Web
Editor\QRDotNetWebEditor\images\AccessVersion\spacer.gif"
border="0"><img src="file:///X:\Design Time\Working\Source\Web
Editor\QRDotNetWebEditor\images\AccessVersion\minus_icon.gif"
border="0"></td>
</tr>
</table>
</body>
</html>

HOWEVER, how do I achieve the same effect by using DataGrid..ie., place
two images in one cell of the datagrid without any spacing between them.

Thanks in adv,
hrm.

Eliyahu Goldin · May 30, 2004

Ram,

I meant puting a table inside the datagrid column:

<ItemTemplate>
<table><tr><td align="right" style="border:0;padding:0">
<asp:Image BackColor=#ff3333 ImageUrl='<%#
DataBinder.Eval(Container.DataItem, "TabSpaceImage") %>' Runat=server
ID="Image1"/>
</td><td align="left" style="border:0;padding:0">
<asp:Image BackColor=#66cc66 ImageUrl='<%#
DataBinder.Eval(Container.DataItem, "NodeStateImage") %>' Runat=server
ID="Image2"/>
</td></tr></table>
</ItemTemplate>

Eliyahu

hrm · May 30, 2004

Hi Eliyahu,

great! it works.. I actually have to place many images side by side..by
recursive use of this solution (ie., placing more tables in two tds of
outer tabls and giving these 2 tds the suitable properties..) I am able
to place any number of items side by side within one cell of the
DataGrid..

thanks again,
hrm.

How to have two html audio players on one page?	0	May 3, 2022
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
SendGrid email issue in responsive Gmail	1	Nov 4, 2021
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button>	1	Apr 22, 2023
Fading effect between play and play-over and pause and pause-over	0	Oct 16, 2021
setting Column width of Template Column in Datagrid..	2	Jun 20, 2006
Display Images in datagrid	0	Jan 11, 2009
Datagrid template column using Excel or Adobe PDF images.	0	Jan 8, 2009

Unnecessary spacing between two images in the same column of datagrid

hrm

Eliyahu Goldin

ram mohan

Eliyahu Goldin

hrm

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads