By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,289 Members | 1,337 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,289 IT Pros & Developers. It's quick & easy.

problem with GridView layout

P: n/a
ASP.NET 2.0

I've got problems with the right column in my GridView. The GridView consist
of 2 columns, the problem column is the column on the right side.

The problem is that it looks like there is a huge space between the 2
columns, see the huge grey space between the 2 columns. I want the columns
to be very close to each other with only 10px open space between the
columns. Now it looks like there is a 160px margin between them

When I resize the browser window I see that the right column floats to the
right, I want it to float to the left so it align close to the left column
and then fills up rest of the GridView (column 1 is about 160px wide, the
problem column should take up rest of the horizontal space in the GridView)

Here is a screenshot which illustrate the problem:
http://home.online.no/~au-holme/pub/768/gridproblem.JPG

This is the markup of this GridView:
<asp:GridView ID="gridUsers"
runat="server"
AutoGenerateColumns="false"
OnRowDataBound="gridUsers_RowDataBound" Width="100%" BorderStyle="None"
BorderWidth="0" RowStyle-BackColor="#999999"
AlternatingRowStyle-BackColor="#666666" >
<Columns>
<asp:TemplateField HeaderStyle-Width="160px"
FooterStyle-Width="160px" ControlStyle-BackColor="Beige"
ControlStyle-Height="140px" ControlStyle-Width="160px" >
<HeaderTemplate>
Picture
</HeaderTemplate>
<ItemTemplate>
<div style="width:160px; background-color:Yellow;
height:140px; padding-bottom:10px; padding-top:10px; padding-left:10px;
padding-right:10px;">
<asp:ImageMap ID="MemberPhoto" runat="server"
OnClick="OnClick" HotSpotMode="PostBack" Width="140" Height="140">
<asp:RectangleHotSpot Top="0" Left="0" Right="140"
Bottom="140" />
</asp:ImageMap>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div style="width:160px; height:140px; padding-bottom:10px;
padding-top:10px; padding-left:10px; padding-right:10px;">
<asp:ImageMap ID="MemberPhoto" runat="server"
OnClick="OnClick" HotSpotMode="PostBack" Width="140" Height="140">
<asp:RectangleHotSpot Top="0" Left="0"
Right="140" Bottom="140" />
</asp:ImageMap>
</div>
</AlternatingItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Details
</HeaderTemplate>
<ItemTemplate>
<div style="background-color:Purple;">
<asp:Label ID="Fullname" runat="server"
Text=""></asp:Label>
<asp:Label ID="Label1" runat="server"
Text="Test"></asp:Label>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div>
<asp:Label ID="Fullname" runat="server"
Text=""></asp:Label>
<asp:Label ID="Label2" runat="server"
Text="Test"></asp:Label>
</div>
</AlternatingItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Any suggestions????
Mar 9 '07 #1
Share this Question
Share on Google+
1 Reply


P: n/a
well, somehow I've solved it... i had to set the width on the right
column... not an ideal solution but that is best I've could do... if anyone
of you have a better solution then please share it with me
"Jeff" <it************@hotmail.com.NOSPAMwrote in message
news:%2***************@TK2MSFTNGP04.phx.gbl...
ASP.NET 2.0

I've got problems with the right column in my GridView. The GridView
consist of 2 columns, the problem column is the column on the right side.

The problem is that it looks like there is a huge space between the 2
columns, see the huge grey space between the 2 columns. I want the columns
to be very close to each other with only 10px open space between the
columns. Now it looks like there is a 160px margin between them

When I resize the browser window I see that the right column floats to the
right, I want it to float to the left so it align close to the left column
and then fills up rest of the GridView (column 1 is about 160px wide, the
problem column should take up rest of the horizontal space in the
GridView)

Here is a screenshot which illustrate the problem:
http://home.online.no/~au-holme/pub/768/gridproblem.JPG

This is the markup of this GridView:
<asp:GridView ID="gridUsers"
runat="server"
AutoGenerateColumns="false"
OnRowDataBound="gridUsers_RowDataBound" Width="100%" BorderStyle="None"
BorderWidth="0" RowStyle-BackColor="#999999"
AlternatingRowStyle-BackColor="#666666" >
<Columns>
<asp:TemplateField HeaderStyle-Width="160px"
FooterStyle-Width="160px" ControlStyle-BackColor="Beige"
ControlStyle-Height="140px" ControlStyle-Width="160px" >
<HeaderTemplate>
Picture
</HeaderTemplate>
<ItemTemplate>
<div style="width:160px; background-color:Yellow;
height:140px; padding-bottom:10px; padding-top:10px; padding-left:10px;
padding-right:10px;">
<asp:ImageMap ID="MemberPhoto" runat="server"
OnClick="OnClick" HotSpotMode="PostBack" Width="140" Height="140">
<asp:RectangleHotSpot Top="0" Left="0" Right="140"
Bottom="140" />
</asp:ImageMap>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div style="width:160px; height:140px; padding-bottom:10px;
padding-top:10px; padding-left:10px; padding-right:10px;">
<asp:ImageMap ID="MemberPhoto" runat="server"
OnClick="OnClick" HotSpotMode="PostBack" Width="140" Height="140">
<asp:RectangleHotSpot Top="0" Left="0"
Right="140" Bottom="140" />
</asp:ImageMap>
</div>
</AlternatingItemTemplate>
<FooterTemplate></FooterTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
Details
</HeaderTemplate>
<ItemTemplate>
<div style="background-color:Purple;">
<asp:Label ID="Fullname" runat="server"
Text=""></asp:Label>
<asp:Label ID="Label1" runat="server"
Text="Test"></asp:Label>
</div>
</ItemTemplate>
<AlternatingItemTemplate>
<div>
<asp:Label ID="Fullname" runat="server"
Text=""></asp:Label>
<asp:Label ID="Label2" runat="server"
Text="Test"></asp:Label>
</div>
</AlternatingItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Any suggestions????

Mar 9 '07 #2

This discussion thread is closed

Replies have been disabled for this discussion.