Solved

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

Posted on 2010-11-17
16
1,327 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 3

Author Comment

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

Expert Comment

by:Alfred1
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
That keeps the gridview two columns wide, but the gap remains..
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 21

Expert Comment

by:Alfred1
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Thank you very much for all your help, that did it!!
0
 
LVL 21

Expert Comment

by:Alfred1
Comment Utility
@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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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 …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

771 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now