Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Need to eliminate the gap between two gridviews which are side by side

Posted on 2010-11-17
16
1,392 Views
Last Modified: 2012-05-10
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
Comment
Question by:Epitel0920
  • 9
  • 6
16 Comments
 
LVL 21

Expert Comment

by:Alfred1
ID: 34160369
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
 
LVL 21

Expert Comment

by:Alfred1
ID: 34160373
Oh by the way, try this as well (without the width)

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

0
 
LVL 21

Expert Comment

by:Alfred1
ID: 34160399
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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 
LVL 3

Author Comment

by:Epitel0920
ID: 34160494
Thank you for the sugestions,  i tried them all but the damn gap is still there.
0
 
LVL 21

Expert Comment

by:Alfred1
ID: 34160512
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
 
LVL 3

Author Comment

by:Epitel0920
ID: 34160550
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
 
LVL 21

Expert Comment

by:Alfred1
ID: 34160601
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
 
LVL 3

Author Comment

by:Epitel0920
ID: 34160669
That keeps the gridview two columns wide, but the gap remains..
0
 
LVL 21

Expert Comment

by:Alfred1
ID: 34160691
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
 
LVL 3

Author Comment

by:Epitel0920
ID: 34160731
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
 
LVL 21

Expert Comment

by:Alfred1
ID: 34161056
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
 
LVL 2

Expert Comment

by:Schells_Web_Design
ID: 34161557
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
 
LVL 3

Author Comment

by:Epitel0920
ID: 34168142
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
 
LVL 21

Accepted Solution

by:
Alfred1 earned 500 total points
ID: 34169646
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
 
LVL 3

Author Comment

by:Epitel0920
ID: 34173361
Thank you very much for all your help, that did it!!
0
 
LVL 21

Expert Comment

by:Alfred1
ID: 34173417
@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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Create animated movies for web page 18 82
alert(innerHTML); 8 32
Html fieldset fix its height and width 4 26
Copying table data to one another 15 29
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question