Epitel0920
asked on
Need to eliminate the gap between two gridviews which are side by side
Hello,
I have two gridviews which I have side by side using a table. Each of these gridviews are formatted to show two columns and have the other three are available so you can scroll to them. However when I display them I have a gap between two gridviews which does not go away no matter what I do, please see attached image.
Could you please tell me how to make that gap disapear?
Also is there anyway to make the gridviews resize depending on the screen size(not as important as making the gap disapear)?
Thank you,
Peter
The relevant part of my code is below:
I have two gridviews which I have side by side using a table. Each of these gridviews are formatted to show two columns and have the other three are available so you can scroll to them. However when I display them I have a gap between two gridviews which does not go away no matter what I do, please see attached image.
Could you please tell me how to make that gap disapear?
Also is there anyway to make the gridviews resize depending on the screen size(not as important as making the gap disapear)?
Thank you,
Peter
The relevant part of my code is below:
<table width="50%" style="overflow:scroll">
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" style="width:40%; height:300; overflow:scroll;">
<ContentTemplate>
<asp:Gridview ID="EditableGrid1" AutoGenerateColumns="False"
runat="server" EnableInsert="False" SaveButtonID=""
OnRowUpdating="EditableGridView1_RowUpdating"
onrowdatabound="EditableGrid1_RowDataBound" CellPadding="0"
CellSpacing="0" Width="100%">
<Columns>
<asp:BoundField HeaderText="A" DataField="A" />
<asp:BoundField HeaderText="B" DataField="B" />
<asp:BoundField HeaderText="C" DataField="C" />
<asp:BoundField HeaderText="D" DataField="D" />
<asp:BoundField HeaderText="E" DataField="E" />
</Columns>
</asp:Gridview>
</ContentTemplate>
</asp:UpdatePanel>
</td>
<td >
<asp:UpdatePanel ID="UpdatePanel2" runat="server" style="width:40%; height:300; overflow:scroll;">
<ContentTemplate>
<asp:Gridview ID="EditableGrid2" AutoGenerateColumns="False"
runat="server" EnableInsert="False" SaveButtonID=""
OnRowUpdating="EditableGridView2_RowUpdating"
onrowdatabound="EditableGrid2_RowDataBound" BorderStyle="None"
CellPadding="0" CellSpacing="0" Width="100%">
<Columns>
<asp:BoundField HeaderText="A" DataField="A" />
<asp:BoundField HeaderText="B" DataField="B" />
<asp:BoundField HeaderText="C" DataField="C" />
<asp:BoundField HeaderText="D" DataField="D" />
<asp:BoundField HeaderText="E" DataField="E" />
</Columns>
</asp:Gridview>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
Oh by the way, try this as well (without the width)
<table border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">
<table border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">
Just additional comment from my previous ones, I believe that your width property is the one causing the gap. If you remove the width it should be ok.
<table style="overflow:scroll">
However, if you really want to eliminate all spacing, border, and padding then what I mentioned in my second post should be the way.
<table border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">
<table style="overflow:scroll">
However, if you really want to eliminate all spacing, border, and padding then what I mentioned in my second post should be the way.
<table border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">
ASKER
Thank you for the sugestions, i tried them all but the damn gap is still there.
OK. How about removing the width (width:40%) in both of your UpdatePanels? Anyway, your Gridview is set as width=100%, so this should be okay on its own.
ASKER
Removing the width enlarges both of the gridviews eliminating the gap, however that is not what I want. What I need is for the gridviews to stay the size they are (at 40% or two columns) but next to each other.
OK. What we need to do is to adjust GridView, leave the width removed in the UpdatePanels and add divs on top of your GridView and remove the Width setting in GridView. Something like this
<div style="width:40%;overflow:auto;">
<asp:Gridview ID="EditableGrid1" AutoGenerateColumns="False"
runat="server" EnableInsert="False" SaveButtonID=""
OnRowUpdating="EditableGridView1_RowUpdating"
onrowdatabound="EditableGrid1_RowDataBound" CellPadding="0"
CellSpacing="0">
<Columns>
<asp:BoundField HeaderText="A" DataField="A" />
<asp:BoundField HeaderText="B" DataField="B" />
<asp:BoundField HeaderText="C" DataField="C" />
<asp:BoundField HeaderText="D" DataField="D" />
<asp:BoundField HeaderText="E" DataField="E" />
</Columns>
</asp:Gridview>
</div>
ASKER
That keeps the gridview two columns wide, but the gap remains..
OK. That width:40% is causing this problem. In your div, remove width and try it again.
<div style="overflow:auto;">
<asp:Gridview ID="EditableGrid1" AutoGenerateColumns="False"
runat="server" EnableInsert="False" SaveButtonID=""
OnRowUpdating="EditableGridView1_RowUpdating"
onrowdatabound="EditableGrid1_RowDataBound" CellPadding="0"
CellSpacing="0">
<Columns>
<asp:BoundField HeaderText="A" DataField="A" />
<asp:BoundField HeaderText="B" DataField="B" />
<asp:BoundField HeaderText="C" DataField="C" />
<asp:BoundField HeaderText="D" DataField="D" />
<asp:BoundField HeaderText="E" DataField="E" />
</Columns>
</asp:Gridview>
</div>
ASKER
Same result as before, it enlarges both grids to full size which fills the gap. But we need the grids to stay 2 columns wide
How about if you try to adjust the width by reducing it to let say width:20% on the div? I think you only need to adjust the width up to a point that the grids would be side by side.
You can change line 1 to set a specific width in pixels instead of 50%. Maybe width=600
Then in line 3 change <td width=50%>
Then in line 23 change <td width=50%>
Then, play with the numbers in line 3 until you get them as close as you want.
You can also change line 3 to a specific pixel width, like <td width=300> and leave line 23 just as a <td> since line 1 and 3 are dictating the width of the table and the first column. The second column just takes up the extra space.
Hope that helps.
Then in line 3 change <td width=50%>
Then in line 23 change <td width=50%>
Then, play with the numbers in line 3 until you get them as close as you want.
You can also change line 3 to a specific pixel width, like <td width=300> and leave line 23 just as a <td> since line 1 and 3 are dictating the width of the table and the first column. The second column just takes up the extra space.
Hope that helps.
ASKER
Alfred1: No, that just makes the gridviews smaller and increases the gap.
Schell: I tried all those ways and while they look good in the design view of VS, the browser still ignores all the changes and sticks in the gap.
I think the problem is the browser leaves the space for the whole gridview(not just the two columns) and forces the other design changes to adjust to it.
Schell: I tried all those ways and while they look good in the design view of VS, the browser still ignores all the changes and sticks in the gap.
I think the problem is the browser leaves the space for the whole gridview(not just the two columns) and forces the other design changes to adjust to it.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thank you very much for all your help, that did it!!
@Epitel0920,
No worries, mate! Glad that I could help.
Hey, thanks as well. My member rank now is Sage with the points I got from you. :-)
No worries, mate! Glad that I could help.
Hey, thanks as well. My member rank now is Sage with the points I got from you. :-)
<table width="50%" border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">
or,
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">