• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1596
  • Last Modified:

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:
 <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>

Open in new window

screenshot.jpg
0
Epitel0920
Asked:
Epitel0920
  • 9
  • 6
1 Solution
 
Alfred A.Commented:
Try the following in your HTML table.  I hope it works.

<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">
0
 
Alfred A.Commented:
Oh by the way, try this as well (without the width)

<table border="0" cellspacing="0" cellpadding="0" style="overflow:scroll">

0
 
Alfred A.Commented:
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">
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
Epitel0920Author Commented:
Thank you for the sugestions,  i tried them all but the damn gap is still there.
0
 
Alfred A.Commented:
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.
0
 
Epitel0920Author Commented:
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.
0
 
Alfred A.Commented:
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>

Open in new window

0
 
Epitel0920Author Commented:
That keeps the gridview two columns wide, but the gap remains..
0
 
Alfred A.Commented:
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>

Open in new window

0
 
Epitel0920Author Commented:
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
0
 
Alfred A.Commented:
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.
0
 
Schells_Web_DesignCommented:
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.
0
 
Epitel0920Author Commented:
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.
0
 
Alfred A.Commented:
OK.  Can you try adding the Width=100% to the GridView (from my previous post)?  Also, try testing actual pixel width rather than percentage and check the results.  I modified your code below.  Also, try playing around with <table width="50%" style="overflow:scroll"> by removing the width and check the results.
<table width="50%" style="overflow:scroll">
    <tr>
    <td>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" style="height:300; overflow:scroll;">
                <ContentTemplate>

                    <div style="width:100px;overflow:auto;">

                    <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>

                    </div>
                </ContentTemplate>
        </asp:UpdatePanel>
    </td>

    <td >
        <asp:UpdatePanel ID="UpdatePanel2" runat="server" style="height:300; overflow:scroll;">
                <ContentTemplate>

                     <div style="width:100px;overflow:auto;">

                    <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>

                    </div>
                </ContentTemplate>
         </asp:UpdatePanel>
    </td>
    </tr>
    </table>

Open in new window

0
 
Epitel0920Author Commented:
Thank you very much for all your help, that did it!!
0
 
Alfred A.Commented:
@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.  :-)

0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 9
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now